/* ════════════════════════════════════ VARIABLES */
:root {
  --bg:       #1a1a1a;
  --bg2:      #212121;
  --bg3:      #2a2a2a;
  --surf:     #302e2b;
  --surf2:    #3d3a36;
  --brd:      #454240;
  --green:    #81b64c;
  --green-dk: #5d8a34;
  --green-gl: rgba(129,182,76,.22);
  --txt:      #e8e0d7;
  --txt-m:    #8d8680;
  --txt-d:    #555250;
  --wsq:      #f5f5ef;
  --bsq:      #4a7c59;
  --hi:       rgba(245,222,25,.5);
  --red:      #e74c3c;
  --gold:     #d4a843;
  --bar-h:    48px;
  --sq: min(
    calc(100vw / 8),
    calc((100vh - var(--bar-h) * 4) / 8),
    84px
  );
  --board: calc(var(--sq) * 8);
  --r: 8px;
  --font:  'Source Sans 3', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--txt); font-family:var(--font); -webkit-font-smoothing:antialiased; }
button { cursor:pointer; border:none; outline:none; background:none; font-family:inherit; }
input  { outline:none; font-family:inherit; }

/* ════════════════════════════════════ SCREENS */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s; overflow-y:auto; }
.screen.active { opacity:1; pointer-events:all; transform:translateY(0); }

/* ════════════════════════════════════ HOME */
.home-bg { position:fixed; inset:0; background:radial-gradient(ellipse 80% 60% at 50% -5%, #253818 0%, var(--bg) 65%); z-index:0; }
.home-content { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem 1.5rem; }
.logo { display:flex; align-items:center; gap:.7rem; }
.logo-king { font-size:3rem; filter:drop-shadow(0 0 16px var(--green-gl)); animation:float 3.5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.logo-text { font-family:var(--serif); font-size:2.6rem; font-weight:900; letter-spacing:-.02em; }
.logo-dot  { color:var(--green); }
.home-tagline { color:var(--txt-m); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-top:-.3rem; }
.home-footer  { position:fixed; bottom:1rem; color:var(--txt-d); font-size:.75rem; }

/* ════════════════════════════════════ PSEUDO */
.pseudo-form  { display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:320px; }
.pseudo-error { color:var(--red); font-size:.82rem; min-height:1.1rem; text-align:center; }

/* ════════════════════════════════════ LOBBY */
.lobby-content { position:relative; z-index:1; display:flex; flex-direction:column; height:100vh; }
.lobby-header  { padding:1rem 1.2rem .8rem; border-bottom:1px solid var(--brd); background:rgba(26,26,26,.85); backdrop-filter:blur(6px); display:flex; flex-direction:column; gap:.6rem; }
.lobby-user    { display:flex; align-items:center; gap:.5rem; }
.lobby-ava     { font-size:1.3rem; }
.lobby-name    { font-weight:700; font-size:1rem; color:var(--green); }
.btn-change-pseudo { background:none; color:var(--txt-m); font-size:.85rem; padding:.2rem .4rem; border-radius:4px; transition:color .15s,background .15s; }
.btn-change-pseudo:hover { color:var(--txt); background:var(--surf2); }
.lobby-title   { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-m); }
.rooms-wrap    { flex:1; overflow-y:auto; padding:.7rem .9rem; }
.rooms-list    { display:flex; flex-direction:column; gap:.45rem; }
.rooms-empty   { color:var(--txt-d); font-size:.9rem; text-align:center; padding:2rem 0; line-height:1.6; }
.room-card     { background:var(--surf); border:1px solid var(--brd); border-radius:var(--r); padding:.75rem 1rem; display:flex; align-items:center; gap:.7rem; cursor:pointer; transition:border-color .15s,background .15s; }
.room-card:hover { border-color:var(--green); background:rgba(129,182,76,.06); }
.room-card-left { display:flex; flex-direction:column; gap:.2rem; flex:1; }
.room-card-host { font-weight:700; font-size:.95rem; }
.room-card-info { font-size:.75rem; color:var(--txt-m); }
.room-card-code { font-family:var(--serif); font-size:1.4rem; font-weight:900; color:var(--green); letter-spacing:.1em; flex-shrink:0; }
.room-card-join { background:var(--green); color:#fff; font-size:.8rem; font-weight:700; padding:.35rem .75rem; border-radius:6px; flex-shrink:0; }
.lobby-actions  { padding:.9rem 1.2rem; border-top:1px solid var(--brd); }

/* ════════════════════════════════════ BUTTONS */
.btn-primary { background:var(--green); color:#fff; font-size:1rem; font-weight:700; padding:.82rem 1.5rem; border-radius:var(--r); letter-spacing:.02em; transition:background .15s,transform .1s; }
.btn-primary:hover  { background:var(--green-dk); }
.btn-primary:active { transform:scale(.97); }
.btn-ghost  { background:var(--surf2); color:var(--txt); font-size:1rem; font-weight:600; padding:.8rem 1.5rem; border-radius:var(--r); border:1px solid var(--brd); transition:background .15s; }
.btn-ghost:hover  { background:#4a4744; }
.btn-accept { background:var(--green); color:#fff; font-size:1.05rem; font-weight:800; padding:.85rem; border-radius:var(--r); width:100%; transition:background .15s; }
.btn-accept:hover { background:var(--green-dk); }
.btn-decline{ background:var(--surf2); color:var(--txt-m); font-size:.95rem; padding:.75rem; border-radius:var(--r); width:100%; }
.btn-decline:hover { background:#4a4744; }
.btn-danger { background:var(--red); color:#fff; font-size:.95rem; font-weight:700; padding:.8rem; border-radius:var(--r); width:100%; }
.btn-full   { width:100%; }
.btn-back   { color:var(--txt-m); font-size:.9rem; padding:.4rem .6rem; border-radius:4px; transition:color .15s,background .15s; }
.btn-back:hover { color:var(--txt); background:var(--surf2); }
.btn-copy   { background:var(--surf2); color:var(--txt); padding:.6rem 1rem; border-radius:var(--r); font-size:.88rem; border:1px solid var(--brd); width:100%; max-width:300px; transition:background .15s; }
.btn-copy:hover { background:#4a4744; }

/* ════════════════════════════════════ TOPBAR (lobby screens) */
.topbar { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border-bottom:1px solid var(--brd); background:var(--bg2); position:sticky; top:0; z-index:5; flex-shrink:0; }
.topbar-title { font-size:1rem; font-weight:700; }
.screen-body { padding:1.2rem; display:flex; flex-direction:column; gap:1rem; max-width:480px; width:100%; margin:0 auto; }
.center-body { align-items:center; text-align:center; padding-top:1.5rem; }
.section-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-m); }
.input-styled { width:100%; max-width:320px; background:var(--surf); border:2px solid var(--brd); border-radius:var(--r); padding:.75rem 1rem; color:var(--txt); font-size:1rem; text-align:center; transition:border-color .2s; }
.input-styled:focus { border-color:var(--green); }
.input-styled::placeholder { color:var(--txt-d); }

/* ════════════════════════════════════ MODE / TIME / COLOR */
.mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.mode-card  { background:var(--surf); border:2px solid var(--brd); border-radius:var(--r); padding:.9rem; cursor:pointer; position:relative; transition:border-color .15s,background .15s; }
.mode-card:hover { background:var(--surf2); }
.mode-card.selected { border-color:var(--green); background:rgba(129,182,76,.07); }
.mode-icon  { font-size:1.7rem; margin-bottom:.3rem; }
.mode-name  { font-weight:700; font-size:.9rem; }
.mode-desc  { color:var(--txt-m); font-size:.75rem; margin-top:.2rem; }
.checkmark  { position:absolute; top:.45rem; right:.45rem; background:var(--green); color:#fff; width:17px; height:17px; border-radius:50%; font-size:.65rem; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.mode-card.selected .checkmark { opacity:1; }
.time-grid  { display:flex; flex-direction:column; gap:.65rem; }
.tg-label   { font-size:.75rem; color:var(--txt-m); font-weight:600; margin-bottom:.3rem; }
.tg-btns    { display:flex; flex-wrap:wrap; gap:.35rem; }
.tbtn       { background:var(--surf); border:2px solid var(--brd); color:var(--txt); padding:.4rem .8rem; border-radius:6px; font-size:.82rem; font-weight:600; transition:border-color .15s,background .15s; }
.tbtn:hover { background:var(--surf2); }
.tbtn-sel   { border-color:var(--green); background:rgba(129,182,76,.1); color:var(--green); }
.color-row  { display:flex; gap:.5rem; }
.cbtn       { flex:1; background:var(--surf); border:2px solid var(--brd); color:var(--txt); padding:.55rem .4rem; border-radius:6px; font-size:.82rem; font-weight:600; transition:border-color .15s,background .15s; }
.cbtn:hover { background:var(--surf2); }
.cbtn-sel   { border-color:var(--green); background:rgba(129,182,76,.1); color:var(--green); }

/* ════════════════════════════════════ WAITING */
.pulse-ring { position:relative; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.pulse-ring::before { content:''; position:absolute; inset:0; border:3px solid var(--brd); border-top-color:var(--green); border-radius:50%; animation:spin 1.1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.pulse-piece { font-size:2rem; animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.87)} }
.wait-label  { color:var(--txt-m); font-size:.9rem; }
.code-box    { background:var(--surf); border:1px solid var(--brd); border-radius:var(--r); padding:.85rem 1.5rem; }
.code-lbl    { color:var(--txt-m); font-size:.72rem; margin-bottom:.3rem; }
.code-val    { font-family:var(--serif); font-size:2.4rem; font-weight:900; color:var(--green); letter-spacing:.18em; }
.copy-ok     { color:var(--green); font-size:.82rem; opacity:0; transition:opacity .3s; height:1rem; }
.copy-ok.show { opacity:1; }
.wait-status { color:var(--green); font-size:.88rem; font-weight:600; min-height:1.2rem; }

/* ════════════════════════════════════ ACCEPT */
.accept-card { background:var(--surf); border:1px solid var(--brd); border-radius:12px; padding:1.3rem; width:100%; max-width:320px; display:flex; flex-direction:column; gap:.9rem; }
.accept-ava  { font-size:2.4rem; background:var(--bg3); border-radius:50%; width:58px; height:58px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.accept-opponent { font-size:1.15rem; font-weight:700; }
.accept-details  { display:flex; flex-direction:column; gap:.45rem; }
.arow { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--brd); font-size:.88rem; }
.arow:last-child { border:none; }
.albl { color:var(--txt-m); }

/* ════════════════════════════════════ GAME LAYOUT */
#screen-game { overflow:hidden; }
.game-wrap {
  display:flex; flex-direction:column;
  height:100vh; width:100%; overflow:hidden;
}

.player-bar {
  display:flex; align-items:center; gap:.45rem;
  padding:.28rem .7rem;
  background:var(--bg2);
  height:var(--bar-h);
  flex-shrink:0; width:100%; overflow:visible;
}
.top-bar  { border-bottom:1px solid var(--brd); }
.bot-bar1 { border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); }
.bot-bar2 { border-top:none; }

.p-ava  { font-size:1.1rem; background:var(--surf); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.p-name { font-weight:700; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; min-width:0; }
.p-caps { font-size:.68rem; color:var(--txt-m); flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:1px; min-width:0; overflow:hidden; }
.p-timer { background:var(--surf); border:2px solid var(--brd); border-radius:6px; padding:.2rem .55rem; min-width:66px; text-align:center; flex-shrink:0; margin-left:auto; transition:border-color .3s,background .3s; }
.p-timer.active { border-color:var(--green); background:rgba(129,182,76,.1); box-shadow:0 0 8px var(--green-gl); }
.p-timer.low    { border-color:var(--red); background:rgba(231,76,60,.12); }
.t-val { font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════ BOT BAR 2 — menu + moves + nav */

/* Menu bouton + popup */
.menu-wrap { position:relative; flex-shrink:0; }
.menu-popup {
  position:absolute;
  bottom:calc(100% + 6px);
  left:0;
  background:var(--surf);
  border:1px solid var(--brd);
  border-radius:var(--r);
  padding:.35rem;
  display:flex; flex-direction:column; gap:.25rem;
  z-index:50;
  min-width:150px;
  box-shadow:0 -4px 20px rgba(0,0,0,.4);
  animation:slideup .18s ease;
}
.menu-popup.hidden { display:none; }
.menu-code {
  font-family:var(--serif); font-size:1rem; font-weight:900;
  color:var(--green); letter-spacing:.12em;
  padding:.35rem .7rem .25rem;
  border-bottom:1px solid var(--brd);
  margin-bottom:.2rem;
  text-align:center;
}
.menu-item {
  background:none; color:var(--txt); font-size:.85rem; font-weight:600;
  padding:.45rem .7rem; border-radius:6px; text-align:left;
  transition:background .12s;
}
.menu-item:hover { background:var(--surf2); }
.menu-item.danger:hover { color:var(--red); background:rgba(231,76,60,.12); }

/* Coups scrollable */
.moves-inline {
  flex:1; min-width:0;
  font-size:.76rem; font-weight:600; color:var(--txt);
  display:flex; align-items:center; gap:.3rem;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  white-space:nowrap;
}
.moves-inline::-webkit-scrollbar { display:none; }
.lm-pair { display:inline-flex; align-items:center; gap:.18rem; flex-shrink:0; padding:.1rem .15rem; border-radius:3px; }
.lm-pair.current-move { background:var(--green); border-radius:4px; }
.lm-pair.current-move .lm-w,
.lm-pair.current-move .lm-b { color:#fff; }
.lm-num { color:var(--txt-d); font-size:.65rem; }
.lm-w   { color:var(--txt); }
.lm-b   { color:var(--txt-m); }

/* Nav boutons */
.nav-btns { display:flex; gap:.25rem; flex-shrink:0; }
.nav-btn  { font-size:.72rem; padding:.28rem .45rem; min-width:28px; }
.nav-btn:disabled { opacity:.3; cursor:default; }

/* ════════════════════════════════════ CTRL (générique) */
.ctrl { background:var(--surf); border:1px solid var(--brd); border-radius:6px; padding:.3rem .5rem; font-size:.82rem; color:var(--txt); flex-shrink:0; transition:background .15s; }
.ctrl:hover { background:var(--surf2); }

/* ════════════════════════════════════ BOARD AREA */
.game-middle {
  flex:1; display:flex; align-items:center; justify-content:center;
  background:var(--bg); overflow:hidden; padding:.2rem; min-height:0;
}
.board-inner { display:inline-flex; flex-direction:column; align-items:flex-start; flex-shrink:0; }
.board-row   { display:flex; flex-direction:row; align-items:flex-start; flex-shrink:0; }

/* ════════════════════════════════════ BOARD */
.board {
  width:var(--board); height:var(--board);
  display:grid;
  grid-template-columns:repeat(8,var(--sq));
  grid-template-rows:repeat(8,var(--sq));
  user-select:none; position:relative;
  border:2px solid #3a6345;
  box-shadow:0 6px 32px rgba(0,0,0,.5);
  flex-shrink:0;
}

/* Cases */
.sq { width:var(--sq); height:var(--sq); position:relative; }
.sq.light { background:var(--wsq); }
.sq.dark  { background:var(--bsq); }
.sq.hi.light { background:color-mix(in srgb, var(--hi) 60%, var(--wsq) 40%); }
.sq.hi.dark  { background:color-mix(in srgb, var(--hi) 50%, var(--bsq) 50%); }
.sq.sel.light { background:rgba(100,200,100,.45); }
.sq.sel.dark  { background:rgba(60,160,60,.5); }
.sq.check     { background:rgba(220,30,30,.55) !important; }

/* Coordonnées dans les cases */
.sq-coord-rank {
  position:absolute; top:1px; left:2px;
  font-size:calc(var(--sq)*.16); font-weight:700; line-height:1;
  pointer-events:none; z-index:1;
}
.sq-coord-file {
  position:absolute; bottom:1px; right:2px;
  font-size:calc(var(--sq)*.16); font-weight:700; line-height:1;
  pointer-events:none; z-index:1;
}
.sq.light .sq-coord-rank,
.sq.light .sq-coord-file { color:var(--bsq); }
.sq.dark  .sq-coord-rank,
.sq.dark  .sq-coord-file { color:var(--wsq); opacity:.7; }

/* Legal dots */
.sq.leg::after  { content:''; position:absolute; inset:0; margin:auto; width:30%; height:30%; background:rgba(0,0,0,.22); border-radius:50%; pointer-events:none; z-index:2; }
.sq.legc::after { content:''; position:absolute; inset:0; border:calc(var(--sq)*.12) solid rgba(0,0,0,.22); border-radius:50%; pointer-events:none; z-index:2; }

/* Pièces SVG inline */
.piece {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  cursor:grab; z-index:3; pointer-events:auto;
}
.piece svg { width:88%; height:88%; display:block; }
.piece.dragging { cursor:grabbing; z-index:100; transform:scale(1.15); }
.piece.reviewing { pointer-events:none; opacity:.9; }

/* Ghost drag */
.ghost {
  position:fixed; z-index:999; pointer-events:none;
  transform:translate(-100%, -100%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));
  opacity:.88;
  transition:none;
}
.ghost svg { display:block; }

/* ════════════════════════════════════ MODALS */
.modal { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadein .2s; }
.modal.hidden { display:none; }
@keyframes fadein { from{opacity:0} }
.modal-box { background:var(--surf); border:1px solid var(--brd); border-radius:14px; padding:1.6rem; max-width:310px; width:90%; text-align:center; display:flex; flex-direction:column; gap:.85rem; box-shadow:0 20px 60px rgba(0,0,0,.55); animation:slideup .22s; }
@keyframes slideup { from{transform:translateY(16px);opacity:0} }
.modal-title { font-size:1.1rem; font-weight:800; }
.modal-sub   { color:var(--txt-m); font-size:.85rem; }
.over-btns   { display:flex; flex-direction:column; gap:.5rem; }
.promo-box   { max-width:280px; }
.promo-choices { display:flex; gap:.5rem; justify-content:center; }
.promo-piece { width:58px; height:58px; background:var(--bg3); border:2px solid var(--brd); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s,transform .1s; }
.promo-piece svg { width:46px; height:46px; }
.promo-piece:hover { border-color:var(--green); transform:scale(1.06); }
.over-box    { max-width:320px; }
.over-result { font-family:var(--serif); font-size:1.85rem; font-weight:900; }
.over-result.win  { color:var(--green); }
.over-result.loss { color:var(--red); }
.over-result.draw { color:var(--gold); }
.over-reason { color:var(--txt-m); font-size:.9rem; }

/* ════════════════════════════════════ TOAST */
.toast { position:fixed; bottom:1.3rem; left:50%; transform:translateX(-50%); background:var(--surf2); border:1px solid var(--brd); color:var(--txt); padding:.55rem 1.1rem; border-radius:8px; font-size:.85rem; font-weight:600; z-index:500; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.4); animation:slideup .2s; }
.toast.hidden { display:none; }

/* ════════════════════════════════════ RESPONSIVE */
@media (max-width:480px) {
  :root { --bar-h:42px; }
  .p-name { font-size:.78rem; }
  .t-val  { font-size:.9rem; }
  .moves-inline { font-size:.68rem; }
}

/* ════════════════════════════════════ DAME CACHÉE */

/* Marqueur dame cachée sur le plateau (seulement visible pour le proprio) */
.sq .hq-marker {
  position:absolute; top:1px; right:1px;
  font-size:calc(var(--sq)*.22); line-height:1;
  pointer-events:none; z-index:4;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.5));
}
/* Pièce avec aura secrète légère */
.piece.hq-mine {
  outline:2px solid rgba(212,168,67,.7);
  outline-offset:-2px;
  border-radius:4px;
}
/* Cases avec pions sélectionnables en mode HQ */
.sq.hq-selectable {
  cursor:pointer;
}
.sq.hq-selectable::before {
  content:'';
  position:absolute; inset:0;
  background:rgba(212,168,67,.32);
  border:2px solid rgba(212,168,67,.85);
  border-radius:3px;
  pointer-events:none; z-index:3;
  animation: hq-pulse 1s ease-in-out infinite;
}
@keyframes hq-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}
/* Bannière de consigne dame cachée */
.hq-banner {
  position:absolute;
  top:0; left:0; right:0;
  background:rgba(212,168,67,.92);
  color:#1a1a1a;
  font-size:.88rem; font-weight:700;
  text-align:center;
  padding:.5rem 1rem;
  z-index:10;
  backdrop-filter:blur(4px);
  letter-spacing:.02em;
  animation:slideup .2s ease;
}
.hq-banner.hidden { display:none; }

/* ════════════════════════════════════ ORIENTATION LOCK */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body::before {
    content: "↩ Tournez votre écran en portrait";
    position: fixed; inset: 0; z-index: 9999;
    background: #1a1a1a; color: #81b64c;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700; text-align: center;
    padding: 2rem;
  }
  body > * { display: none !important; }
}

/* ════════════════════════════════════ JOIN CODE INPUT */
#join-code-input { font-family: var(--serif); }

/* ════════════════════════════════════ PRE-MOVES */
.sq.premove-from {
  background: rgba(200,40,40,.18) !important;
}
.sq.premove-to {
  /* opacité cumulative : 0.3 par pièce, max 0.85 */
  background: rgba(200,40,40,var(--pm-alpha,0.3)) !important;
}
.sq.premove-sel {
  /* case sélectionnée = fond rouge moyen, PAS de border */
  background: rgba(220,50,50,.45) !important;
}
.piece.premove-ghost {
  pointer-events: none;
  opacity: 0.75;
}