*{ 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{
  padding:14px 14px 10px;
  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; }
.hudBox{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  min-width:92px;
}
.hudLabel{ font-size:11px; opacity:.75; }
.hudValue{ font-size:18px; font-weight:800; margin-top:4px; }

.main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

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

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

.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:800;
  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;
}

/* =========================================================
   GRILLE 48 CASES = variables CSS --cols et --rows (fixées en JS)
   Board non carré (6x8) : on lui donne une hauteur adaptée à l'écran
========================================================= */
.board{
  --cols: 6;
  --rows: 8;

  width:100%;
  height: min(74vh, 760px);

  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 : petites au niveau 1, puis un peu plus grosses par niveau
   => on joue sur l'inset (marges internes) plutôt que sur un scale
========================================================= */
.tile{
  position:absolute;
  inset: var(--tileInset, 14%);
  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,.14);
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(0);
}

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

/* Rang hiérarchique => tuile un peu plus grande (inset décroissant) */
.tile.level-1{ --tileInset: 16%; }
.tile.level-2{ --tileInset: 13%; }
.tile.level-3{ --tileInset: 10%; }
.tile.level-4{ --tileInset: 7%; }
.tile.level-5{ --tileInset: 4%; }
.tile.level-6{ --tileInset: 2%; }
.tile.level-7{ --tileInset: 0%; }

.tile.selected{
  outline:3px solid rgba(255,255,255,.85);
  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); }
}

.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(520px, 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;
}

.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:800;
  font-size:13px;
  z-index:60;
}
.toast.hidden{ display:none; }

/* Confort smartphone */
@media (max-width:420px){
  .topbar{ padding:12px 12px 8px; }
  .hudBox{ min-width:86px; padding:9px 11px; }
  .btn{ padding:12px 12px; border-radius:16px; }
  .board{ padding:9px; gap:7px; border-radius:18px; height: min(76vh, 820px); }
  .cell{ border-radius:14px; }
  .tile{ border-radius:14px; }
}