/* ===== VARIABLES & RESET ===== */
:root {
  --bg: #0a0a0f;
  --bg2: #12121a;
  --bg3: #1a1a26;
  --panel: #1e1e2e;
  --border: #2a2a3e;
  --accent: #7c6af7;
  --accent2: #f7a26a;
  --accent3: #6af7c8;
  --green: #4ade80;
  --red: #f87171;
  --orange: #fb923c;
  --text: #e8e8f0;
  --text2: #9090b0;
  --text3: #5a5a7a;
  --white-key: #f0f0f8;
  --black-key: #1a1a26;
  --radius: 8px;
  --shadow: 0 4px 32px rgba(0,0,0,0.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Syne',sans-serif;
  display:flex;flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ===== OVERLAY SCREENS ===== */
.overlay{
  position:fixed;inset:0;
  background:rgba(10,10,15,0.97);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  backdrop-filter:blur(8px);
}
.overlay.hidden{display:none}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:48px;
  max-width:520px;
  width:90%;
  box-shadow:var(--shadow);
  text-align:center;
}
.card h1{
  font-size:2.4rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.card .subtitle{
  color:var(--text2);font-size:.95rem;
  margin-bottom:32px;line-height:1.6;
}
.input-group{
  text-align:left;margin-bottom:20px;
}
.input-group label{
  display:block;font-size:.8rem;font-weight:700;
  color:var(--text2);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:8px;
}
.input-group input, .input-group select{
  width:100%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Syne',sans-serif;
  font-size:1rem;
  padding:12px 16px;
  outline:none;
  transition:border-color .2s;
}
.input-group input:focus,.input-group select:focus{
  border-color:var(--accent);
}
.input-group select option{background:var(--bg2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),#5b4fd4);
  color:#fff;
  border:none;border-radius:var(--radius);
  padding:14px 32px;
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  text-transform:uppercase;letter-spacing:.08em;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,106,247,.4)}
.btn:active{transform:translateY(0)}
.btn.secondary{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text2);
}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn.danger{background:linear-gradient(135deg,var(--red),#b91c1c)}

/* ===== LEVEL CARDS ===== */
/* LEVEL SLIDER */
.level-slider-wrap{margin-bottom:4px}
.level-slider-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.level-num{
  font-family:'Space Mono',monospace;
  font-size:2rem;font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  min-width:2.5rem;text-align:center;
}
.level-icon{font-size:1.6rem}
#level-slider{
  width:100%;margin:0 0 12px;
  accent-color:var(--accent);
  height:6px;cursor:pointer;
}
.level-desc-box{
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:10px 14px;
  min-height:48px;
}
.level-desc-box .lv-name{
  font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:4px;
}
.level-desc-box .lv-desc{
  font-size:.75rem;color:var(--text2);line-height:1.5;
}

/* ===== MAIN LAYOUT ===== */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* TOP BAR */
#topbar{
  display:flex;align-items:center;gap:16px;
  padding:10px 20px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  height:56px;
}
#topbar .logo{font-weight:800;font-size:1.1rem;color:var(--accent);white-space:nowrap}
.tb-sep{flex:1}
.tb-info{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.tb-badge{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;padding:4px 10px;
  font-size:.78rem;color:var(--text2);white-space:nowrap;
  font-family:'Space Mono',monospace;
}
.tb-badge span{color:var(--text);font-weight:700}

/* MAIN CONTENT */
#main{display:flex;flex:1;overflow:hidden;gap:0}

/* LEFT PANEL */
#left-panel{
  width:280px;flex-shrink:0;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.lp-section{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.lp-title{
  font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text3);margin-bottom:10px;
}

/* CHORD TARGET */
#chord-display{
  text-align:center;
  padding:16px;
}
.chord-name-en{
  font-size:2rem;font-weight:800;
  color:var(--accent);line-height:1;
}
.chord-name-fr{
  font-size:1rem;color:var(--text2);margin-top:4px;
}
.chord-notes-list{
  display:flex;justify-content:center;gap:6px;
  margin-top:10px;flex-wrap:wrap;
}
.note-chip{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;padding:3px 8px;
  font-size:.78rem;color:var(--text);
  font-family:'Space Mono',monospace;
}
.note-chip.hit{background:rgba(74,222,128,.15);border-color:var(--green);color:var(--green)}

/* GRILLE */
#grid-display{padding:12px 16px}
.grid-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.grid-cell{
  flex:1;text-align:center;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:5px;padding:6px 4px;
  font-size:.78rem;transition:all .3s;
}
.grid-cell.active{
  background:rgba(124,106,247,.2);
  border-color:var(--accent);color:var(--accent);
  font-weight:700;
}
.grid-cell.done{
  background:rgba(74,222,128,.1);
  border-color:var(--green);color:var(--green);
}
.grid-cell.error{
  background:rgba(248,113,113,.1);
  border-color:var(--red);color:var(--red);
}
.beat-indicator{
  display:flex;gap:4px;padding:8px 16px;
}
.beat-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--border);transition:background .1s;
}
.beat-dot.active{background:var(--accent2)}
.beat-dot.played{background:var(--accent)}

/* LISTEN BTN */
#listen-btn{
  width:100%;margin:0;border-radius:0;
  background:linear-gradient(90deg,rgba(124,106,247,.15),rgba(106,247,200,.1));
  border-top:1px solid var(--border);
  color:var(--accent3);
  padding:12px;font-size:.85rem;
}
#listen-btn:hover{background:rgba(124,106,247,.25);transform:none;box-shadow:none}

/* SCORE PANEL */
#score-panel{padding:12px 16px;margin-top:auto}
.score-bar-wrap{
  background:var(--bg2);border-radius:4px;overflow:hidden;
  height:6px;margin-bottom:8px;
}
.score-bar{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent3));
  transition:width .5s ease;
  width:0%;
}
.score-nums{
  display:flex;justify-content:space-between;
  font-size:.75rem;color:var(--text2);
  font-family:'Space Mono',monospace;
}

/* METRONOME */
#metro-panel{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  border-top:1px solid var(--border);
}
.metro-bpm{
  font-family:'Space Mono',monospace;
  font-size:1.1rem;font-weight:700;
  color:var(--accent2);
  min-width:56px;
}
.metro-tick{
  width:14px;height:14px;border-radius:50%;
  background:var(--border);transition:background .05s,box-shadow .05s;
  flex-shrink:0;
}
.metro-tick.on{
  background:var(--accent2);
  box-shadow:0 0 12px var(--accent2);
}

/* CENTER - PIANO ROLL SYNTHESIA (notes tombent vers clavier en bas) */
#center{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Piano roll canvas : occupe tout l'espace disponible au-dessus du clavier */
#pr-canvas-wrap{
  flex:1;overflow:hidden;position:relative;
  background:var(--bg);
}
#pr-canvas{display:block;position:absolute;top:0;left:0}
#pr-labels-canvas{display:none}

/* KEYBOARD — horizontal en bas, scrollable horizontalement */
#keyboard-wrap{
  flex-shrink:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:var(--bg2);
  border-top:1px solid var(--border);
  height:108px;
  position:relative;
}
#keyboard{
  position:relative;
  height:104px;
  /* width set by JS */
}

/* Touches blanches */
.wkey{
  position:absolute;
  bottom:0;
  width:28px;
  height:100px;
  background:var(--white-key);
  border:1px solid #bbb;
  border-radius:0 0 5px 5px;
  box-sizing:border-box;
  z-index:1;
  cursor:pointer;
  user-select:none;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;
  font-size:.48rem;color:#888;
  transition:background .05s;
}
.wkey.pressed{background:#c8c0ff}
.wkey.target{background:rgba(124,106,247,.45);box-shadow:0 -4px 12px rgba(124,106,247,.4)}
.wkey.correct{background:var(--green)}
.wkey.wrong{background:var(--red)}

/* Touches noires */
.bkey{
  position:absolute;
  bottom:38px;
  width:18px;
  height:62px;
  background:#1a1a26;
  border:1px solid #444;
  border-radius:0 0 4px 4px;
  box-sizing:border-box;
  z-index:2;
  cursor:pointer;
  user-select:none;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;
  font-size:.42rem;color:#777;
  transition:background .05s;
}
.bkey.pressed{background:#5b4fd4}
.bkey.target{background:rgba(124,106,247,.8);box-shadow:0 -4px 8px rgba(124,106,247,.5)}
.bkey.correct{background:var(--green)}
.bkey.wrong{background:var(--red)}

/* RIGHT PANEL */
#right-panel{
  width:220px;flex-shrink:0;
  background:var(--panel);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
}
.rp-section{padding:14px 14px;border-bottom:1px solid var(--border)}
.rp-title{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}

/* FEEDBACK LOG */
#feedback-log{
  flex:1;overflow-y:auto;
  padding:10px 14px;
}
.fb-item{
  font-size:.75rem;
  padding:5px 8px;
  border-radius:4px;
  margin-bottom:5px;
  font-family:'Space Mono',monospace;
  line-height:1.4;
  border-left:3px solid;
  animation:slideIn .2s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.fb-ok{background:rgba(74,222,128,.08);border-color:var(--green);color:var(--green)}
.fb-err{background:rgba(248,113,113,.08);border-color:var(--red);color:var(--red)}
.fb-info{background:rgba(124,106,247,.08);border-color:var(--accent);color:var(--accent)}
.fb-warn{background:rgba(251,146,60,.08);border-color:var(--orange);color:var(--orange)}

/* NOTES PLAYED DISPLAY */
.notes-played-wrap{
  display:flex;flex-wrap:wrap;gap:4px;
  min-height:28px;
}
.np-chip{
  background:rgba(124,106,247,.15);
  border:1px solid var(--accent);
  border-radius:4px;padding:2px 6px;
  font-size:.72rem;color:var(--accent);
  font-family:'Space Mono',monospace;
}

/* MIDI STATUS */
.midi-status{
  display:flex;align-items:center;gap:6px;
  font-size:.75rem;color:var(--text2);
}
.midi-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--red);transition:background .3s;
  flex-shrink:0;
}
.midi-dot.connected{background:var(--green);box-shadow:0 0 8px var(--green)}

/* PROGRESS BAR CHORD */
#chord-progress-wrap{
  padding:8px 16px;
  background:var(--bg2);
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.cp-label{font-size:.7rem;color:var(--text3);margin-bottom:4px;display:flex;justify-content:space-between}
.cp-bar-bg{background:var(--border);border-radius:4px;height:4px;overflow:hidden}
.cp-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width .3s;width:0%}

/* PATTERN DISPLAY */
.pattern-display{
  display:flex;gap:4px;flex-wrap:wrap;
}
.pat-beat{
  display:flex;flex-direction:column;gap:2px;
  align-items:center;
}
.pat-tick{
  width:16px;height:16px;border-radius:3px;
  background:var(--bg2);border:1px solid var(--border);
  font-size:.55rem;line-height:16px;text-align:center;
  color:var(--text3);transition:all .1s;
}
.pat-tick.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 6px rgba(124,106,247,.4)}
.pat-tick.played{background:var(--accent3);border-color:var(--accent3);color:#000}
.pat-tick.missed{background:var(--red);border-color:var(--red);color:#fff}
.pat-tick.early{background:var(--orange);border-color:var(--orange);color:#fff}
.pat-label{font-size:.55rem;color:var(--text3)}

/* RESULT CARD */
#result-card .score-big{
  font-size:4rem;font-weight:800;
  font-family:'Space Mono',monospace;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin:16px 0 4px;
}
#result-card .score-detail{
  color:var(--text2);font-size:.9rem;margin-bottom:24px;
}
.result-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:24px;text-align:left;
}
.rs-item{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;padding:10px 12px;
}
.rs-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.rs-val{font-size:1.1rem;font-weight:700;color:var(--text);font-family:'Space Mono',monospace}

/* SAVING OVERLAY */
#saving-overlay{
  position:fixed;inset:0;background:rgba(10,10,15,.8);
  display:flex;align-items:center;justify-content:center;
  z-index:2000;
  flex-direction:column;gap:12px;
  font-size:1rem;color:var(--text2);
}
#saving-overlay.hidden{display:none}
.spinner{
  width:32px;height:32px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOOLBAR */
#toolbar{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tb-btn{
  background:var(--panel);border:1px solid var(--border);
  border-radius:5px;padding:5px 12px;
  color:var(--text2);font-size:.78rem;font-family:'Syne',sans-serif;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tb-btn:hover{border-color:var(--accent);color:var(--accent)}
.tb-btn.active{background:rgba(124,106,247,.15);border-color:var(--accent);color:var(--accent)}
#toolbar .sep{width:1px;height:20px;background:var(--border);margin:0 4px}

/* ===== WELCOME + SCORE RANGE DISPLAY ===== */
.range-wrap{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.range-wrap input[type=range]{flex:1;accent-color:var(--accent)}
.range-val{font-family:'Space Mono',monospace;color:var(--accent);min-width:28px;text-align:right}

/* TOAST */
#toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:10px 20px;
  font-size:.85rem;color:var(--text);
  opacity:0;transition:all .3s;
  z-index:3000;pointer-events:none;
  box-shadow:var(--shadow);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* WAITING SCREEN */
#waiting-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:16px;
  color:var(--text2);
}
#waiting-screen.hidden{display:none}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
/* ===== AIDE BUTTON ===== */
.aide-link {
  position: absolute;
  top: 14px;
  right: 14px;
  display: block;
  opacity: 0.65;
  transition: opacity .2s, transform .2s;
  z-index: 10;
}
.aide-link:hover { opacity: 1; transform: scale(1.1); }
.aide-img { width: 22px; height: 22px; display: block; }
/* La card de l'overlay doit être relative pour positionner l'image */
.card { position: relative; }

/* ===== BRIEFING OVERLAY ===== */
.briefing-card {
  max-width: 580px;
  text-align: left;
}
.briefing-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.briefing-icon {
  font-size: 2.8rem;
  line-height: 1;
}
.briefing-level {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.briefing-sub {
  font-size: .85rem;
  color: var(--text2);
  margin-top: 2px;
}
.briefing-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.br-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.br-rule-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.br-rule-body {}
.br-rule-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.br-rule-detail {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.5;
}
.briefing-countdown {
  text-align: center;
  font-size: .9rem;
  color: var(--text2);
  margin-bottom: 16px;
}
.briefing-countdown span {
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}