@font-face {
  font-family: 'PS2P';
  src: url('fonts/frelonix-pixel.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Bungee';
  src: url('fonts/bungee.woff2') format('woff2');
  font-display: block;
}

:root {
  --fond: #05010f;
  --cyan: #3df2ff;
  --rose: #ff3cc7;
  --jaune: #ffe74a;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--fond);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
}

#jeu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* Boutons d'angle */
#boutons {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  display: flex;
  gap: 8px;
  z-index: 5;
}
#boutons button {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(61, 242, 255, 0.45);
  background: rgba(10, 4, 30, 0.55);
  color: var(--cyan);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 10px rgba(61, 242, 255, 0.25);
}
#boutons button:hover { border-color: var(--cyan); }
#boutons button:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
#boutons svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
#boutons svg rect { stroke: none; }
#b-son .barre { display: none; }
#b-son.muet .barre { display: inline; }
#b-son.muet .onde { display: none; }
#b-son.muet { color: #ff6a8a; border-color: rgba(255, 106, 138, 0.5); }
#b-pause[hidden], #b-plein[hidden] { display: none; }

/* Saisie du pseudo */
#saisie {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 360px);
  box-sizing: border-box;
  padding: 22px 18px 18px;
  z-index: 10;
  text-align: center;
  font-family: 'PS2P', monospace;
  color: #fff;
  background: rgba(8, 2, 28, 0.94);
  border: 2px solid var(--rose);
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(255, 60, 199, 0.45), inset 0 0 18px rgba(61, 242, 255, 0.12);
  -webkit-user-select: text;
  user-select: text;
}
#saisie[hidden] { display: none; }
#saisie .titre { margin: 0 0 12px; font-size: 14px; color: var(--jaune); text-shadow: 0 0 8px rgba(255, 231, 74, 0.7); }
#saisie .score { margin: 0 0 18px; font-size: 20px; color: var(--cyan); text-shadow: 0 0 10px rgba(61, 242, 255, 0.7); }
#saisie label { display: block; font-size: 10px; margin-bottom: 10px; color: #c9d3ff; }
#saisie input {
  width: 100%;
  box-sizing: border-box;
  font: 16px 'PS2P', monospace;
  padding: 12px 8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--jaune);
  background: #0b0626;
  border: 2px solid var(--cyan);
  border-radius: 4px;
  outline: none;
  touch-action: manipulation;
}
#saisie input:focus { box-shadow: 0 0 12px rgba(61, 242, 255, 0.6); }
#saisie .actions { display: flex; gap: 10px; margin-top: 16px; }
#saisie .actions button {
  flex: 1;
  font: 11px 'PS2P', monospace;
  padding: 12px 6px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
#b-envoyer { color: #07031a; background: var(--jaune); border: 2px solid var(--jaune); }
#b-passer { color: #c9d3ff; background: transparent; border: 2px solid rgba(201, 211, 255, 0.4); }
#saisie .actions button:disabled { opacity: 0.5; cursor: default; }
#saisie .message { min-height: 1.4em; margin: 14px 0 0; font-size: 9px; line-height: 1.5; color: #ff8ab0; }