/* ================================
   Variables & reset de base
================================ */
:root{
  --bg:#0b0f16;
  --ui:#101826;
  --ink1:#e6e6e6;
  --ink2:#66c2ff; /* échelles/cordes/caisses */
  --ink3:#ffd34d; /* caisses surlignées */
  --accent:#00ffa8;
  --danger:#ff4d6d;
}

html, body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink1);
  font:14px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  display:grid;
  place-items:center;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================================
   Layout principal
================================ */
.wrap{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  max-width:min(100vw, 920px);
  margin-inline:auto;
  padding:8px;
}

/* ================================
   HUD / boutons / pills
================================ */
.hud{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--ui);
  border:1px solid #1e2a3b;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.hud .left, .hud .right{ display:flex; flex-wrap:wrap; gap:.5rem;}

.pill{
  background:#121827;
  border:1px solid #1f2937;
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.95rem; line-height:1;
}
.pill strong{ color:var(--accent) }

.btn{
  cursor:pointer;
  background:#1e293b;
  border:1px solid #334155;
  border-radius:999px;
  padding:.45rem .8rem;
  font-weight:600;
}
.btn:hover{ background:#132036 }
.btn[aria-pressed="true"]{ outline:2px solid #93c5fd }

/* ================================
   Zone de jeu (canvas + overlay)
   -> Assure le positionnement local du toast
================================ */
.game-stage{
  position:relative;          /* référence pour #toast */
  display:inline-block;
}

canvas{
  display:block;
  width:100%; height:auto;
  aspect-ratio:800/460;
  image-rendering: pixelated; /* vibe rétro */
  background:#000;
  border:1px solid #1d2a3b;
  border-radius:.75rem;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  touch-action:none;
  will-change: transform;
}

/* Empêche pinch/zoom et double-tap sur la zone interactive uniquement */
canvas#game,
.touch,
.radial-pad,
.radial-pad .dir,
.act.act-dig,
button[data-key]{
  touch-action: none;           /* bloque pinch / double-tap zoom / panning */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Si tu veux garder le scroll de la page et éviter les rebonds sur Android/Chrome */
html, body{ overscroll-behavior: contain; }

/* ================================
   Détails / accordéons
================================ */
details{
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:.75rem;
  padding:.5rem .75rem;
  max-width:920px;
}
summary{ cursor:pointer; color:#a9c7ff }
kbd{
  background:#142034;
  border:1px solid #203147;
  border-bottom-width:3px;
  border-radius:6px;
  padding:2px 6px;
}

/* ================================
   TOAST (dans .game-stage)
   - une seule ligne au-dessus du canvas
   - fade + léger slide
================================ */
#toast{
  position:absolute;
  top:21%; left:50%;
  transform:translateX(-50%) translateY(-6px);
  z-index:20;
  pointer-events:none;

  background:#111827;
  border:1px solid #374151;
  color:#cfe6ff;
  border-radius:.5rem;
  padding:.4rem .8rem;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  backdrop-filter: blur(4px);

  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
#toast:not([hidden]){
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
#toastMsg{ display:inline-block }

/* ================================
   Commandes tactiles
================================ */
.touch{
  position:fixed; inset:auto 8px 8px auto;
  display:grid; gap:.5rem;
  pointer-events:none; user-select:none;
}
.touch .cluster{
  display:grid;
  grid-template-columns:repeat(3,48px);
  grid-template-rows:repeat(3,48px);
  gap:.35rem; place-items:center;
  pointer-events:auto;
}
.touch .actions{ display:flex; gap:.35rem; justify-content:center; pointer-events:auto }
.btnpad,.act{
  width:48px; height:48px;
  border-radius:.75rem;
  border:1px solid #334155;
  background:#111827;
  display:grid; place-items:center;
  cursor:pointer;
}
.btnpad:active, .act:active{ filter:brightness(1.2) }
.muted{ opacity:.5 }

/* Texte blanc pour les boutons HUD du haut */
.hud :is(#btnPause, #btnSound, #btnRestart, #btnNext) {
  color: #fff;
}
.hud :is(#btnPause, #btnSound, #btnRestart, #btnNext):hover,
.hud :is(#btnPause, #btnSound, #btnRestart, #btnNext)[aria-pressed="true"] {
  color: #fff; /* garde le blanc aussi au hover / état actif */
}

/* Masque les commandes tactiles dès qu’on a de la place */
@media (min-width:900px){
  .touch{ display:none }
}

/* Accessibilité – réduire les animations */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto }
  #toast{ transition:opacity .01s linear, transform .01s linear }
}

/* Toujours afficher les contrôles tactiles, même sur desktop */
.touch{
  display: grid !important;
  position: fixed;
  inset: auto 12px 12px auto;   /* bas-droite */
  grid-template-columns: auto auto; 
  gap: .6rem;
  align-items: end;
  z-index: 60;
  pointer-events: none;
}
.touch > *{ pointer-events: auto; }

/* Conteneur des contrôles en bas à droite */
.touch{
  position: fixed; inset: auto 12px 12px auto;
  grid-template-columns: auto auto; gap: .6rem; align-items: end;
  z-index: 60; pointer-events: none;
}
.touch > *{ pointer-events: auto; }

/* === Taille des boutons de creusement (réglable ici) === */
:root{
  --act-size: 40px;            /* ⇦ change cette valeur (ex: 56px, 72px...) */
}


/* D-pad radial : tu peux garder tes règles, voici un rappel compact propre */
.radial-pad{
  --size: 150px;        /* diamètre du pad (augmente si tu veux) */
  --btn: 30px;          /* diamètre d’un bouton direction */
  --radius: calc(var(--size)/2 - var(--btn)/2 - 8px);
  position: relative; width: var(--size); height: var(--size);
  border-radius: 50%;
  background: #0f172abb;
  border: 1px solid #1f2937;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  touch-action: none;
}
.radial-pad .dir{
  position: absolute; left:50%; top:50%;
  width: var(--btn); height: var(--btn);
  border-radius: 50%;
  border: 1px solid #334155;
  background: #111827; color: #e5e7eb;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  transform:
    translate(-50%,-50%)
    rotate(var(--angle))
    translate(0, calc(-1 * var(--radius)))
    rotate(calc(-1 * var(--angle)));
}


.radial-pad .dir:active{ filter: brightness(1.15); }

/* Angles (0° = HAUT) */

.radial-pad .btn0   { --angle:   0deg; }   /* Haut */
.radial-pad .btn45  { --angle:  45deg; }   /* Saut ↗ (↑+→) */
.radial-pad .btn90  { --angle:  90deg; }   /* Droite */
.radial-pad .btn180 { --angle: 180deg; }   /* Bas */
.radial-pad .btn270 { --angle: 270deg; }   /* Gauche */
.radial-pad .btn315 { --angle: 315deg; }   /* Saut ↖ (↑+←) */


/* Boutons creusement (inchangés, exemple de base) */
.actions{ display:flex; gap:.5rem; justify-content:center; }

.act{
  width: 64px; height: 64px; border-radius: 999px;
  border: 1px solid #334155; background:#111827; color:#e5e7eb;
  display:grid; place-items:center; touch-action:none; cursor:pointer;
}

/* Boutons de creusement (gauche/droite) */
.act.act-dig{
  width: var(--act-size);
  height: var(--act-size);
  border-radius: 999px;
  border: 1px solid #334155;
  background: #111827;
  color: #e5e7eb;
  display: grid;
  place-items: center;
  font-size: calc(var(--act-size) * 0.38);
  touch-action: none;
  cursor: pointer;
}
.act.act-dig:active{ filter: brightness(1.15); }

/* Anti-sélection/long-press */
.no-select, .no-select *{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  touch-action:none; /* évite les gestes navigateur */
}

/* Toujours visible (même sur desktop) et ancré bas-droite */
.touch{
  position: fixed;
  inset: auto 14px 14px auto;   /* bottom-right */
  display: flex !important;
  align-items: center;
  gap: .75rem;                  /* espace entre bouton gauche, pad, bouton droit */
  z-index: 60;
  pointer-events: none;
}
.touch > *{ pointer-events: auto; }