/* ===========================================================
   Chord Coach — "Brownface" : panneau d'ampli Fender vintage
   =========================================================== */
:root{
  --tolex:#191009;   /* chassis / fond            */
  --walnut:#2C1D12;  /* surfaces surélevées       */
  --gold:#C9A24B;    /* sérigraphie / hairlines   */
  --gold-dim:#8a6f34;
  --cream:#E8D9B5;   /* texte lisible / grandes lettres */
  --oxblood:#9E2B25; /* actif / écoute / erreur extrême */
  --teal:#5AC8B0;    /* RÉSERVÉ : accordé, uniquement */
  --amber:#F2A93B;   /* en approche / flèches     */
  --hair:rgba(201,162,75,.22);
  --inset-hi:inset 0 1px 0 rgba(201,162,75,.35);
  --r:14px;
  font-size:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* l'attribut hidden doit toujours l'emporter, même sur display:flex (sinon overlays bloqués) */
[hidden]{display:none !important}
html,body{margin:0}
html{height:100%}
body{
  background:
    radial-gradient(120% 80% at 18% 0%, #23150c 0%, var(--tolex) 60%) fixed,
    var(--tolex);
  color:var(--cream);
  font-family:"Inter",system-ui,sans-serif;
  max-width:520px;margin:0 auto;
  padding:env(safe-area-inset-top) 14px 0;
  height:100vh;height:100dvh;          /* hauteur viewport figée */
  display:flex;flex-direction:column;
  overflow:hidden;                     /* one-page : jamais de scroll */
}
main{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column}
.grain{position:fixed;inset:0;width:100%;height:100%;opacity:.05;pointer-events:none;z-index:9999;mix-blend-mode:overlay}

h1,h2,.note,.chord-name,.meter-label,.amp-btn,.nl,.brand h1{font-family:"Familjen Grotesk",system-ui,sans-serif}
.mono,.cents,.hz,.voicing,.pip .hz{font-family:"Space Mono",monospace;font-variant-numeric:tabular-nums}

/* ---------- en-tête de marque ---------- */
.brand{position:relative;text-align:center;padding:clamp(7px,2vh,18px) 0 clamp(5px,1.4vh,14px);flex:0 0 auto}
.brand h1{font-size:15px;letter-spacing:.42em;color:var(--gold);font-weight:600;margin:0;text-indent:.42em}
.brand .model{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.28em;color:var(--gold-dim);margin:5px 0 0}
.brand .screw{position:absolute;top:16px}
.brand .s1{left:14px}.brand .s2{right:14px}

/* ---------- vis sérigraphiées ---------- */
.screw{width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e7cf8f, #9c7c33 55%, #5c481d 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.5);}
.screw::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:1.4px;background:rgba(0,0,0,.55);border-radius:1px;transform:rotate(28deg)}
.faceplate .screw{position:absolute}
.c-tl{top:10px;left:10px}.c-tr{top:10px;right:10px}.c-bl{bottom:10px;left:10px}.c-br{bottom:10px;right:10px}

/* ---------- la PLAQUE (signature) ---------- */
.faceplate{
  position:relative;border-radius:var(--r);padding:clamp(12px,2.2vh,20px) 18px;margin-bottom:clamp(8px,1.6vh,16px);
  background:
    radial-gradient(130% 100% at 12% 0%, #3a2618 0%, #2c1d12 46%, #20140b 100%);
  border:1px solid rgba(0,0,0,.5);
  box-shadow:var(--inset-hi), 0 1px 0 rgba(201,162,75,.10), 0 14px 30px -16px rgba(0,0,0,.8);
}
.faceplate::before{ /* liseré or brossé intérieur */
  content:"";position:absolute;inset:6px;border-radius:10px;
  border:1px solid var(--hair);pointer-events:none}
.meter-label{font-size:10px;letter-spacing:.32em;color:var(--gold);font-weight:600;text-transform:uppercase}
.meter-label.sm{font-size:9px;letter-spacing:.26em}

/* ---------- ACCORDEUR ---------- */
.tuner{padding-top:clamp(12px,2.2vh,22px);flex:0 0 auto}
.tuner .meter-label{text-align:center;margin-bottom:clamp(6px,1.4vh,12px)}
.strobe{display:block;width:100%;height:clamp(38px,7vh,62px);border-radius:8px;
  background:linear-gradient(var(--tolex),#120b06);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.5);
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.readout{text-align:center;margin:clamp(6px,1.4vh,12px) 0 6px}
.note{font-size:clamp(40px,10.5vh,78px);line-height:.92;font-weight:700;color:var(--cream);letter-spacing:-.02em;
  transition:color .4s ease}
.note sub{font-size:clamp(15px,3.2vh,24px);color:var(--gold-dim);font-weight:500;vertical-align:baseline}
.note.lit{color:var(--teal)}
.direction{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;height:18px}
.direction .arrow{color:var(--amber);font-size:12px;opacity:.18;transition:opacity .12s}
.direction.flat .arrow.up{opacity:1}
.direction.sharp .arrow.dn{opacity:1}
.dirtxt{font-family:"Familjen Grotesk";font-size:10px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.direction.locked .dirtxt{color:var(--teal)}
.data{margin-top:8px;font-size:14px;color:var(--gold)}
.data .sep{color:var(--gold-dim);margin:0 8px}
.data .hz{color:var(--gold-dim)}
.detune-track{position:relative;height:6px;margin:clamp(8px,1.6vh,14px) 6px 2px;border-radius:6px;
  background:linear-gradient(90deg,rgba(158,43,37,.5),rgba(242,169,59,.25) 38%,rgba(242,169,59,.25) 62%,rgba(158,43,37,.5));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
/* zone "cible" : repère central qui s'illumine quand on est accordé */
.detune-track::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:12%;
  transform:translateX(-50%);border-radius:6px;background:rgba(90,200,176,.10);
  transition:background .3s ease, box-shadow .3s ease;pointer-events:none}
.detune-track.intune::before{background:rgba(90,200,176,.28);box-shadow:0 0 14px rgba(90,200,176,.5)}
.detune-track .center{position:absolute;left:50%;top:-3px;width:1px;height:12px;background:var(--gold);transform:translateX(-.5px);z-index:1}
.detune-track .dot{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;z-index:2;
  background:var(--amber);transform:translate(-50%,-50%);
  transition:left .24s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease, width .25s ease, height .25s ease;
  box-shadow:0 0 8px rgba(242,169,59,.6);opacity:0}
.detune-track .dot.show{opacity:1}
.detune-track .dot.locked{background:var(--teal);width:15px;height:15px;box-shadow:0 0 16px rgba(90,200,176,.9)}

/* bloom "lampe qui chauffe" sur accord juste */
@keyframes bloom{
  0%{box-shadow:var(--inset-hi), 0 14px 30px -16px rgba(0,0,0,.8)}
  40%{box-shadow:inset 0 1px 0 rgba(90,200,176,.9), 0 0 0 1px rgba(90,200,176,.7), 0 0 34px -4px rgba(90,200,176,.55)}
  100%{box-shadow:inset 0 1px 0 rgba(90,200,176,.55), 0 0 0 1px rgba(90,200,176,.32), 0 14px 30px -16px rgba(0,0,0,.8)}
}
.faceplate.locked{animation:bloom .9s ease-out forwards}

/* ---------- rail des cordes ---------- */
.string-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:clamp(8px,1.6vh,14px);flex:0 0 auto}
.pip{background:var(--walnut);border:1px solid var(--hair);border-radius:10px;
  padding:clamp(6px,1.2vh,10px) 4px clamp(5px,1vh,8px);text-align:center;cursor:pointer;transition:.14s;box-shadow:var(--inset-hi)}
.pip .nm{font-family:"Familjen Grotesk";font-weight:700;font-size:18px;color:var(--cream)}
.pip .hz{display:block;font-size:8.5px;color:var(--gold-dim);margin-top:2px}
.pip.active{border-color:var(--gold);box-shadow:var(--inset-hi),0 0 0 1px var(--gold),0 0 16px -4px rgba(201,162,75,.6)}
.pip.active .nm{color:var(--gold)}
.pip.tuned{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 18px -4px rgba(90,200,176,.7)}
.pip.tuned .nm{color:var(--teal)}

/* ---------- presets ---------- */
.presets{display:flex;gap:8px;margin-bottom:clamp(8px,1.8vh,18px);flex:0 0 auto}
.presets button{flex:1;background:transparent;border:1px solid var(--hair);color:var(--gold-dim);
  border-radius:9px;padding:9px 4px;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.08em;cursor:pointer;transition:.14s}
.presets button.on{color:var(--tolex);background:var(--gold);border-color:var(--gold);font-weight:700}

/* ---------- boutons ampli ---------- */
.amp-btn{display:block;width:100%;border:0;border-radius:11px;cursor:pointer;flex:0 0 auto;
  font-family:"Familjen Grotesk";font-weight:600;font-size:13px;letter-spacing:.18em;padding:clamp(11px,1.8vh,15px);transition:.14s}
.amp-btn.primary{margin-top:auto}   /* ancre le bouton en bas de la vue */
.amp-btn.primary{color:var(--cream);
  background:linear-gradient(180deg,#3a2415,#241710);
  box-shadow:var(--inset-hi),0 1px 0 rgba(201,162,75,.12),0 8px 18px -10px rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.5)}
.amp-btn.primary:active{transform:translateY(1px)}
.amp-btn.live{color:var(--oxblood);box-shadow:var(--inset-hi),0 0 0 1px rgba(158,43,37,.6),0 0 22px -8px rgba(158,43,37,.8)}
.micnote{color:var(--gold-dim);font-size:11px;text-align:center;margin:clamp(6px,1.1vh,10px) 4px 0;line-height:1.4;flex:0 0 auto}

/* ---------- vues / nav ---------- */
.view{display:none}
.view.active{display:flex;flex-direction:column;height:100%;min-height:0;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.amp-nav{flex:0 0 auto;width:auto;margin:0 -14px;
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg,#241710,#160d07);
  border-top:1px solid var(--hair);box-shadow:0 -10px 24px -16px rgba(0,0,0,.9);
  padding-bottom:env(safe-area-inset-bottom);z-index:50}
.amp-nav button{background:none;border:0;color:var(--gold-dim);padding:clamp(9px,1.5vh,16px) 0 clamp(8px,1.3vh,14px);cursor:pointer;position:relative}
.amp-nav .nl{font-family:"Familjen Grotesk";font-weight:600;font-size:12px;letter-spacing:.3em}
.amp-nav button.on{color:var(--gold)}
.amp-nav .navlamp{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#3a2414}
.amp-nav button.on .navlamp{background:var(--oxblood);box-shadow:0 0 8px rgba(158,43,37,.9)}

/* ---------- accords : en-tête ---------- */
.header-plate{padding:clamp(11px,1.8vh,16px) 16px;flex:0 0 auto}
.io-row{display:flex;align-items:center;justify-content:space-between;margin-top:clamp(7px,1.4vh,12px)}
.seg{display:flex;border:1px solid var(--hair);border-radius:9px;overflow:hidden}
.seg button{background:transparent;border:0;color:var(--gold-dim);font-family:"Familjen Grotesk";font-weight:600;
  font-size:10px;letter-spacing:.16em;padding:8px 12px;cursor:pointer}
.seg button.on{background:var(--gold);color:var(--tolex)}
.lamp-wrap{display:flex;align-items:center;gap:7px}
.lamp{width:8px;height:8px;border-radius:50%;background:#3a2414;transition:.2s}
.lamp.live{background:var(--oxblood);box-shadow:0 0 9px rgba(158,43,37,.9)}
.lampTxt{font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:.12em;color:var(--gold-dim)}
.manual-picker{display:none;flex-wrap:wrap;gap:6px;margin-top:12px}
.manual-picker.show{display:flex}
.manual-picker button{background:var(--walnut);border:1px solid var(--hair);color:var(--cream);
  font-family:"Familjen Grotesk";font-weight:600;font-size:13px;border-radius:8px;padding:7px 11px;cursor:pointer}
.manual-picker button:active{border-color:var(--gold)}

/* ---------- accord courant : plaque de touche ---------- */
.chord-stage{margin-bottom:clamp(8px,1.6vh,16px);flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center}
.chord-head{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(6px,1.2vh,10px)}
.chord-name{font-size:clamp(30px,6.4vh,46px);font-weight:700;line-height:1;color:var(--cream);transition:font-weight .3s,color .3s}
.chord-name.locked{font-weight:700;color:var(--gold)}
.chord-meta{font-family:"Space Mono",monospace;font-size:10px;color:var(--gold-dim);letter-spacing:.04em}
.fretboard svg{height:clamp(112px,19vh,168px);width:auto}
.fretboard{position:relative;border-radius:12px;padding:clamp(8px,1.6vh,14px);display:flex;justify-content:center;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 6px),
    linear-gradient(180deg,#3a2113,#26140a);
  box-shadow:var(--inset-hi),inset 0 0 30px rgba(0,0,0,.5),0 10px 24px -16px rgba(0,0,0,.8);
  border:1px solid rgba(0,0,0,.5)}

/* ---------- styles ---------- */
.style-row{margin-bottom:clamp(8px,1.6vh,16px);flex:0 0 auto}
.styles{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(5px,1vh,8px)}
.styles .chip{background:transparent;border:1px solid var(--hair);color:var(--gold-dim);
  font-family:"Familjen Grotesk";font-weight:600;font-size:11px;letter-spacing:.08em;
  border-radius:999px;padding:8px 14px;cursor:pointer;transition:.14s}
.styles .chip.on{background:var(--gold);color:var(--tolex);border-color:var(--gold)}

/* ---------- suggestions (lane) ---------- */
.suggest{margin-bottom:clamp(6px,1.2vh,10px);flex:0 0 auto}
.lane{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lane::-webkit-scrollbar{height:0}
.lane .empty{color:var(--gold-dim);font-size:12px;padding:8px 2px}
.sug-card{flex:0 0 auto;width:128px;scroll-snap-align:start;cursor:pointer;
  background:var(--walnut);border:1px solid var(--hair);border-radius:12px;padding:10px 8px 8px;text-align:center;
  box-shadow:var(--inset-hi);transition:transform .16s,border-color .16s}
.sug-card:active{transform:translateY(-3px) scale(.99);border-color:var(--gold)}
.sug-card .cn{font-family:"Familjen Grotesk";font-weight:700;font-size:20px;color:var(--cream)}
.sug-card .rm{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.14em;color:var(--gold);margin:1px 0 6px}
.sug-card .voicing{display:block;font-size:9px;color:var(--gold-dim);margin-top:6px;letter-spacing:.06em}

/* diagrammes svg : couleurs pilotées par le thème */
.fretboard svg .wire{stroke:var(--gold-dim)}
.fretboard svg .nut{fill:var(--gold)}
.fretboard svg .dot{fill:var(--gold)}
.fretboard svg .open{stroke:var(--cream)}
.fretboard svg .mute{fill:var(--oxblood)}
.fretboard svg text{fill:var(--gold-dim)}
.sug-card svg .wire{stroke:var(--gold-dim)}
.sug-card svg .nut{fill:var(--gold-dim)}
.sug-card svg .dot{fill:var(--cream)}
.sug-card svg .open{stroke:var(--gold-dim)}
.sug-card svg .mute{fill:var(--oxblood)}
.sug-card svg text{fill:var(--gold-dim)}

/* ---------- install toast ---------- */
.install-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(74px + env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:480px;
  display:flex;align-items:center;gap:10px;z-index:60;
  background:linear-gradient(180deg,#34210f,#1d120a);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;
  box-shadow:var(--inset-hi),0 16px 30px -14px rgba(0,0,0,.85)}
.install-toast span{flex:1;font-size:12.5px;color:var(--cream)}
.install-toast button{background:var(--gold);color:var(--tolex);border:0;border-radius:8px;padding:9px 12px;
  font-family:"Familjen Grotesk";font-weight:700;font-size:11px;letter-spacing:.1em;cursor:pointer}
.install-toast button.ghost{background:transparent;color:var(--gold-dim);padding:9px 8px}

/* ---------- install help (repli iOS / pas de prompt natif) ---------- */
.install-help{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,5,2,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.install-help .ih-card{width:100%;max-width:480px;background:linear-gradient(180deg,#34210f,#1c110a);
  border:1px solid var(--hair);border-radius:16px;padding:18px 18px 14px;
  box-shadow:var(--inset-hi),0 24px 50px -16px rgba(0,0,0,.9)}
.install-help h3{font-family:"Familjen Grotesk";font-weight:700;font-size:16px;color:var(--cream);
  margin:0 0 12px;letter-spacing:.02em}
.install-help .ih-warn{margin:0 0 12px;padding:9px 11px;border-radius:9px;
  background:rgba(158,43,37,.18);border:1px solid rgba(158,43,37,.55);
  color:var(--cream);font-size:12.5px;line-height:1.45}
.install-help .ih-warn b{color:var(--amber);font-weight:700}
.ih-glyph{display:inline-block;width:15px;height:15px;vertical-align:-3px;color:var(--gold);margin:0 1px}
.install-help ol{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.install-help li{font-size:13px;line-height:1.5;color:var(--cream)}
.install-help li b{color:var(--gold);font-weight:600}
.install-help #ihClose{display:block;width:100%;background:var(--gold);color:var(--tolex);border:0;
  border-radius:9px;padding:11px;font-family:"Familjen Grotesk";font-weight:700;font-size:12px;
  letter-spacing:.1em;cursor:pointer}

/* écrans courts : on resserre encore pour rester one-page sans scroll */
@media (max-height:660px){
  .note{font-size:clamp(36px,9vh,60px)}
  .sug-card{width:112px}
  .sug-card .cn{font-size:18px}
  .sug-card svg{height:96px;width:auto}
  .lane{padding:6px 2px 3px}
  .fretboard svg{height:clamp(104px,17vh,150px)}
  .header-plate{padding:10px 16px}
  .io-row{margin-top:6px}
  .suggest{margin-bottom:4px}
}
@media (max-height:540px){
  .brand{padding:5px 0 4px}
  .brand .model{display:none}
  .pip .hz{display:none}
  .micnote{display:none}
  .data{margin-top:4px;font-size:12px}
  .sug-card svg{height:84px;width:auto}
  /* tuner : compression maximale pour tenir en paysage très court */
  .note{font-size:clamp(28px,7.5vh,46px)}
  .note sub{font-size:14px}
  .strobe{height:clamp(28px,6vh,48px)}
  .tuner{padding-top:6px}
  .faceplate{padding:8px 16px;margin-bottom:6px}
  .readout{margin:4px 0 2px}
  .string-rail{margin-bottom:6px}
  .pip .nm{font-size:15px}
  .presets{margin-bottom:6px}
  .presets button{padding:6px 4px}
  .detune-track{margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}