*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 900px at 20% 0%, #111827 0%, #05070f 60%, #03040a 100%);
  color:#e5e7eb;
  overflow:hidden;
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ---------------- Topbar ---------------- */
.topbar{
  padding:12px 14px 8px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand .title{ font-weight:900; letter-spacing:.2px; font-size:18px; }
.brand .subtitle{ opacity:.85; font-size:12px; margin-top:2px; }

.hud{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.hudBox{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:8px 10px;
  min-width:92px;
}
.hudLabel{ font-size:11px; opacity:.75; }
.hudValue{ font-size:16px; font-weight:900; margin-top:3px; }

/* Terrain */
.main{
  flex:1;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:8px 12px 10px;
}

.panel{
  width:min(860px, 100%);
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.controls{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#e5e7eb;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  touch-action: manipulation;
}
.btn:active{ transform: translateY(1px); }
.btn.primary{ background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.45); }

.status{ display:flex; flex-direction:column; gap:6px; padding:2px 2px 0; }
.selectionInfo{ font-size:13px; opacity:.95; }
.hint{ font-size:12px; opacity:.75; }

/* 48 cases : 8 colonnes x 6 lignes (paysage) */
.board{
  --cols: 8;
  --rows: 6;

  width:100%;
  aspect-ratio: 8 / 6;
  max-height: 72vh;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:10px;

  display:grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap:8px;

  position:relative;
  touch-action: manipulation;
}

.cell{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  position:relative;
  overflow:hidden;
}

/* Tuiles */
.tile{
  position:absolute;
  inset: 10%;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px;

  user-select:none;
  -webkit-user-select:none;
  font-weight:900;
  letter-spacing:.2px;

  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);

  transform: translateZ(0);
  transition: filter 120ms ease, outline-color 120ms ease;
}

.tile .label{
  line-height:1.05;
  font-size: clamp(10px, 2.1vw, 16px);
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Indicateur discret N */
.tile .lvl{
  position:absolute;
  top:6px;
  left:7px;
  font-size:11px;
  font-weight:900;
  opacity:.92;
  padding:2px 7px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

.tile.selected{
  outline:3px solid rgba(255,255,255,.88);
  outline-offset:-3px;
  filter: brightness(1.10);
}

.tile.shake{ animation: shake .22s linear 0s 1; }
@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

/* Pulse : fusion plus visible */
.tile.pulse{ animation: pulse 520ms ease-out 0s 1; }
@keyframes pulse{
  0%{ transform: scale(0.90); filter: brightness(1.00); }
  45%{ transform: scale(1.08); filter: brightness(1.18); }
  100%{ transform: scale(1.00); filter: brightness(1.00); }
}

/* Overlays */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.overlay.hidden{ display:none; }

.modal{
  width:min(560px, 100%);
  background: rgba(17,24,39,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
  padding:16px 16px 14px;
}
.modalTitle{ font-weight:900; font-size:18px; margin-bottom:8px; }
.modalText{ font-size:14px; opacity:.92; }
.modalText p{ margin:10px 0; }
.modalActions{ display:flex; justify-content:flex-end; margin-top:12px; }

.formRow{ display:flex; flex-direction:column; gap:6px; margin:12px 0 6px; }
.formLabel{ font-size:12px; opacity:.85; }
.formInput{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#e5e7eb;
  outline:none;
  font-weight:800;
}
.formInput:focus{ border-color: rgba(99,102,241,.65); }

.smallNote{ font-size:12px; opacity:.80; margin-top:8px; }

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background: rgba(0,0,0,.70);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  z-index:60;
}
.toast.hidden{ display:none; }

/* -------- Rotation hint -------- */
.rotateHint{
  position:fixed;
  inset:0;
  z-index:80;
  background: rgba(0,0,0,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.rotateHint.hidden{ display:none; }

.rotateCard{
  width:min(520px, 100%);
  background: rgba(17,24,39,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
  padding:16px 16px 14px;
  text-align:center;
}
.rotateTitle{ font-weight:900; font-size:18px; margin-bottom:8px; }
.rotateText{ font-size:14px; opacity:.92; line-height:1.35; }

/* -------- Smartphone -------- */
@media (hover:none) and (pointer:coarse){
  #app{ height:100dvh; }

  .topbar{ padding:8px 10px 6px; align-items:flex-end; }
  .brand .subtitle{ display:none; }

  .hud{ gap:8px; }
  .hudBox{ min-width:78px; padding:6px 8px; border-radius:12px; }
  .hudValue{ font-size:15px; }

  .main{ padding:6px 8px 8px; }
  .panel{ gap:8px; }

  .controls{ gap:8px; }
  .btn{ padding:10px 10px; border-radius:14px; font-weight:850; }

  .status{ gap:4px; }
  .selectionInfo{ font-size:12px; }
  .hint{ font-size:11px; }

  .board{ padding:8px; gap:6px; max-height: none; } /* max-height géré par JS sur mobile */
  .tile .label{ font-size: clamp(11px, 3.2vw, 18px); }

  /* IMPORTANT : sur smartphone, on masque Nx pour éviter les chevauchements */
  .tile .lvl{ display:none !important; }
}