/* =====================================================================
   Guitar Game — Design System
   Thème : « music / energetic » sombre. Palette compatible avec les
   diagrammes d'accords SVG (accent bleu #58a6ff) + glow violet de marque.
   ===================================================================== */

:root {
  /* --- Surfaces --- */
  --bg: #07090f;
  --bg-elev: #0f1422;
  --inset: #080b13;
  --panel: #0e1320;

  /* --- Bordures --- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* --- Texte --- */
  --text: #e8eef7;
  --muted: #8b97ac;

  /* --- Accents --- */
  --accent: #58a6ff;          /* bleu : aligné sur les diagrammes d'accords */
  --accent-2: #a371f7;        /* violet : marque / glow */
  --green: #3fb950;
  --red: #f85149;
  --brand: linear-gradient(135deg, #a371f7 0%, #58a6ff 100%);
  --brand-glow: rgba(124, 92, 255, 0.45);

  /* --- Échelle d'espacement (4 / 8 pt) --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* --- Rayons & ombres --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --t-fast: 0.15s ease;
  --t-med: 0.25s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(900px 480px at 18% -8%, rgba(163, 113, 247, 0.16), transparent 60%),
    radial-gradient(1100px 560px at 82% -12%, rgba(88, 166, 255, 0.14), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100dvh;
  padding: var(--s5);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- Header */
.site-header { max-width: 1180px; margin: 0 auto var(--s5); }
.brand {
  display: flex;
  align-items: center;
  gap: var(--s4);
  justify-content: center;
  text-align: left;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 1.7rem;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(163, 113, 247, 0.22), rgba(88, 166, 255, 0.12));
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px var(--brand-glow);
  flex-shrink: 0;
}
.brand-text h1 {
  font-family: "Righteous", system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle { color: var(--muted); margin-top: var(--s1); font-size: 0.92rem; }

/* ----------------------------------------------------------------- Main */
main {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--s5);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

.panel, .stage {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 120px),
    var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-2);
}

/* --------------------------------------------------------------- Boutons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 8px 22px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.96); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-icon { font-size: 0.85em; }

.status {
  color: var(--muted);
  opacity: 0.7;
  font-size: 0.72rem;
  margin: var(--s2) 0 var(--s4);
  min-height: 1.2em;
}

/* ------------------------------------------------- Lectures note/accord */
.readouts { display: flex; gap: var(--s3); margin-bottom: var(--s4); }
.readout {
  flex: 1;
  min-width: 0;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s3) 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 96px;
  position: relative;
  overflow: hidden;
}
.readout::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand);
  opacity: 0.5;
}
.readout .label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.readout .value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.readout .value.chord { color: var(--accent); }
.value.pulse { animation: pop 0.18s ease; }
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); text-shadow: 0 0 18px currentColor; }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------- Accordeur */
.tuner { margin-bottom: var(--s4); }
.tuner-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--s1);
  padding: 0 var(--s1);
}
.tuner-dial {
  position: relative;
  height: 74px;
  background:
    linear-gradient(90deg, rgba(248, 81, 73, 0.12), transparent 32%, transparent 68%, rgba(248, 81, 73, 0.12)),
    var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Repère central « juste » */
.tuner-center {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(var(--green), rgba(63, 185, 80, 0));
  opacity: 0.5;
}
.tuner-needle {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 4px;
  height: 54px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(63, 185, 80, 0.6);
  transform-origin: bottom center;
  transition: transform 0.08s ease, background var(--t-fast), box-shadow var(--t-fast);
}

/* --------------------------------------------------------- Sélecteur jeu */
.game-picker { display: block; margin-bottom: var(--s4); }
.game-picker-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.game-picker select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--inset);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b97ac' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.game-picker select:hover { border-color: var(--border-strong); }

/* ------------------------------------------------------------------ Stage */
.stage { display: flex; flex-direction: column; align-items: stretch; }

.stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}
.stage-title {
  font-family: "Righteous", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--text);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--accent); }
.btn-ghost:active { transform: translateY(1px); }

.stage-frame {
  position: relative;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #010409;
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border);
}

/* ------------------------------------------------- Écran d'accueil du jeu */
.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: radial-gradient(120% 120% at 50% 0%, rgba(13, 17, 31, 0.78), rgba(4, 5, 10, 0.92));
  backdrop-filter: blur(2px);
  z-index: 5;
}
.game-overlay[hidden] { display: none; }

.game-overlay-card {
  width: min(440px, 100%);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5);
  box-shadow: var(--shadow-3);
}
.game-overlay-title {
  font-family: "Righteous", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: var(--s3);
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.game-overlay-text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--s5);
}
.game-overlay-btn { width: auto; padding: 13px 22px; }
.game-overlay-error {
  margin-top: var(--s4);
  padding: 10px var(--s3);
  color: #ffd7d3;
  background: rgba(248, 81, 73, 0.14);
  border: 1px solid rgba(248, 81, 73, 0.5);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  line-height: 1.4;
}
.game-overlay-error[hidden] { display: none; }
#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0d1117;
}

/* Plein écran : on met TOUT le bloc principal en plein écran (SIDEBAR comprise)
   afin de garder l'accès aux infos note/accord et au choix du mini-jeu. */
main:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: var(--s4);
  gap: var(--s4);
  background: var(--bg);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}
main:fullscreen .panel { overflow-y: auto; }
main:fullscreen .stage { height: 100%; min-height: 0; }
main:fullscreen .stage-frame {
  flex: 1;
  min-height: 0;
}
main:fullscreen #gameCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* tout le jeu visible, sans rognage */
}
/* L'aide diagrammes et l'astuce prennent trop de hauteur en plein écran. */
main:fullscreen .chord-help,
main:fullscreen .hint { display: none; }

/* Plein écran en PORTRAIT : on empile, panneau compact en haut, jeu en bas. */
@media (orientation: portrait) {
  main:fullscreen {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  main:fullscreen .panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    overflow: visible;
  }
  main:fullscreen .panel .btn-primary,
  main:fullscreen .panel .game-picker { flex: 1 1 200px; width: auto; margin: 0; }
  main:fullscreen .readouts { flex: 1 1 100%; margin: 0; }
  main:fullscreen .status,
  main:fullscreen .tuner { display: none; }
}

/* Curseur masqué après inactivité (plein écran / mode épuré). */
body.cursor-hidden,
body.cursor-hidden * { cursor: none; }

/* ----------------------------------------- Mode épuré (touche H) : que le dessin */
body.hide-chrome { padding: 0; }
body.hide-chrome .site-header,
body.hide-chrome .panel,
body.hide-chrome .stage-toolbar,
body.hide-chrome .chord-help,
body.hide-chrome .hint,
body.hide-chrome footer { display: none; }
body.hide-chrome main {
  grid-template-columns: 1fr;
  max-width: none;
  gap: 0;
  height: 100dvh;
}
body.hide-chrome .stage {
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  height: 100dvh;
}
body.hide-chrome .stage-frame {
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}
body.hide-chrome #gameCanvas {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ------------------------------- Portrait : pivot du jeu (paysage) -------
   En mode épuré (touche H), où l'on n'affiche QUE le dessin, on fait pivoter
   le canvas de 90° sur un écran tenu en portrait pour qu'il remplisse toute la
   surface au lieu d'une mince bande. (Le plein écran, lui, garde la sidebar
   visible et n'est donc pas pivoté.) Les dimensions sont volontairement
   échangées car la rotation les inverse visuellement. */
@media (orientation: portrait) {
  body.hide-chrome .stage-frame { position: relative; }

  body.hide-chrome #gameCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100dvh;   /* deviendra la HAUTEUR visible après rotation */
    height: 100dvw;  /* deviendra la LARGEUR visible après rotation */
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    object-fit: fill;
  }
}

/* ----------------------------------------------- Bandeau d'aide accords */
.chord-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s3);
  width: 100%;
  margin-top: var(--s4);
}
.chord-card {
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 8px 2px;
  line-height: 0;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.chord-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.chord-help-text {
  flex-basis: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: var(--s1) auto 0;
  max-width: 560px;
  line-height: 1.45;
}

.hint { color: var(--muted); font-size: 0.82rem; margin-top: var(--s3); text-align: center; }
kbd {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 600;
}

footer { text-align: center; color: var(--muted); font-size: 0.78rem; margin-top: var(--s6); }

/* ----------------------------------------------------- Focus & a11y */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ Responsive */

/* Tablette & paysage étroit : on empile, la zone de jeu passe en pleine
   largeur (le canvas 16:9 reste lisible). */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; gap: var(--s4); }
  .brand { justify-content: flex-start; }
}

/* Mobile : panneau compact, en-tête réduit. */
@media (max-width: 640px) {
  body { padding: var(--s3); }
  .site-header { margin-bottom: var(--s4); }
  .brand { gap: var(--s3); }
  .brand-mark { width: 46px; height: 46px; font-size: 1.4rem; }
  .brand-text h1 { font-size: 1.45rem; }
  .subtitle { font-size: 0.82rem; }

  .panel, .stage { padding: var(--s4); }

  /* Le micro et l'accordeur restent prioritaires ; on resserre le reste. */
  .readout { height: 80px; }
  .readout .value { font-size: 1.6rem; }
  .tuner-dial { height: 60px; }
  .tuner-needle { height: 42px; }

  .stage-toolbar { margin-bottom: var(--s2); }
  .stage-title { font-size: 1rem; }
  .btn-ghost { padding: 7px 11px; font-size: 0.8rem; }

  .chord-help { gap: var(--s2); }
  .hint { font-size: 0.76rem; }
}

/* Très petits écrans : on masque l'accordeur fin (place gagnée pour le jeu). */
@media (max-width: 380px) {
  .tuner { display: none; }
  .brand-text h1 { font-size: 1.3rem; }
}

/* Mobile EN PAYSAGE (téléphone couché, peu de hauteur) : on privilégie la
   zone de jeu, on allège tout le superflu vertical. */
@media (max-height: 500px) and (orientation: landscape) {
  body { padding: var(--s2); }
  .site-header, footer, .hint { display: none; }
  main { grid-template-columns: 1fr; gap: var(--s2); }
  .panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .panel .btn-primary { width: auto; }
  .tuner, .game-picker { flex: 1 1 160px; margin-bottom: 0; }
  .status { display: none; }
}