/* =====================================================================
   PROMPT — jeu de prompt engineering
   Palette : cyan/orange sur fond deep space. Cohérent avec les autres jeux.
   ===================================================================== */
:root{
  --bg-deep:#02040a; --bg-elev:#08111e; --bg-card:rgba(10,18,36,0.6);
  --border:rgba(120,180,255,0.14); --border-strong:rgba(120,180,255,0.32);
  --text:#e8edf5; --text-muted:#a3b0c5; --text-soft:#7d8aa1;
  --accent:#5dd4f7; --accent-deep:#2189c4; --accent-soft:rgba(93,212,247,0.10);
  --accent-glow:rgba(93,212,247,0.32);
  --secondary:#ffb37c; --secondary-soft:rgba(255,130,60,0.10);
  --success:#39ff14; --success-soft:rgba(57,255,20,0.10);
  --warn:#ffb070; --warn-soft:rgba(255,176,112,0.12);
  --danger:#ff5a2a;  --danger-soft:rgba(255,90,42,0.12);
  --radius:14px; --radius-sm:8px;
  --tween:200ms cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg-deep)}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;color:var(--text);background:transparent;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
/* HAL background layer */
.neural-bg{position:fixed;inset:0;width:100vw;height:100dvh;z-index:-2;pointer-events:none;display:block}
.neural-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.10) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,0.55) 90%);
  mix-blend-mode:multiply}
body[data-hal="amber"]{--accent:#ffb37c;--accent-deep:#c66a1a;--accent-soft:rgba(255,179,124,0.10);--accent-glow:rgba(255,179,124,0.32)}
.back-to-menu{
  position:fixed;top:12px;left:12px;z-index:10;
  padding:.55rem .85rem;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-muted);text-decoration:none;font-weight:600;font-size:.85rem;
  backdrop-filter:blur(10px);transition:background var(--tween),color var(--tween),border-color var(--tween);
}
.back-to-menu:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.85rem;
  padding:1.5rem 1rem .8rem;text-align:center;
}
.topbar .brand{
  font-size:2rem;font-weight:900;letter-spacing:.15em;
  background:linear-gradient(135deg,var(--accent),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar .tag{
  font-size:.7rem;font-family:ui-monospace,SFMono-Regular,monospace;
  color:var(--text-soft);letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .8rem;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-card);
}
.layout{max-width:820px;margin:0 auto;padding:1rem 1.25rem 4rem;display:grid;gap:1rem}
.panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.6rem;backdrop-filter:blur(10px);
  animation:panelIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
.p-title{
  font-size:1.4rem;margin:0 0 .75rem;line-height:1.3;
  display:flex;align-items:center;gap:.7rem;
}
.p-num{
  display:inline-grid;place-items:center;width:2rem;height:2rem;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--border-strong);border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,monospace;font-weight:800;font-size:1rem;
}
.p-hint{margin:.4rem 0;color:var(--text-muted);font-size:.95rem;line-height:1.6}
.p-hint em{color:var(--text);font-style:normal;font-weight:600}
.p-hint strong{color:var(--accent);font-weight:700}
.hint{color:var(--text-soft);font-size:.8rem;font-family:ui-monospace,monospace}
.intro-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-card);color:var(--text);font-weight:700;text-decoration:none;
  cursor:pointer;font-size:.95rem;font-family:inherit;
  transition:background var(--tween),border-color var(--tween),color var(--tween),transform var(--tween);
  min-height:42px;
}
.btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  border-color:transparent;color:#04070f;box-shadow:0 6px 20px -6px var(--accent-glow);
}
.btn-primary:hover{color:#04070f;filter:brightness(1.1);border-color:transparent}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-card)}

/* ─── Écran défi ─── */
.play-head{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.chip{
  padding:.35rem .8rem;border-radius:999px;font-size:.72rem;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;
  border:1px solid var(--border);background:var(--bg-elev);color:var(--text-muted);
}
.chip-num{border-color:var(--border-strong);color:var(--accent);background:var(--accent-soft)}
.chip-score{border-color:var(--border-strong);color:var(--secondary);background:var(--secondary-soft)}
.chip-cat{text-transform:uppercase}
.challenge-context{margin:.75rem 0;padding:.9rem 1rem;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--radius-sm)}
.ctx-label{margin:0 0 .35rem;color:var(--text-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
#challenge-context-body{margin:0;color:var(--text-muted);font-size:.85rem;font-family:ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;line-height:1.5;max-height:200px;overflow-y:auto}
.input-label{display:block;margin:.75rem 0 .45rem;font-weight:700;font-size:.85rem;color:var(--text)}
#prompt-input{
  width:100%;padding:.85rem 1rem;background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text);font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.9rem;line-height:1.55;resize:vertical;min-height:180px;
  transition:border-color var(--tween);
}
#prompt-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input-footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}
.input-footer > div{display:flex;gap:.5rem}

/* ─── Écran résultat ─── */
.result-score{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.score-ring{
  --p:0;
  position:relative;width:130px;height:130px;flex-shrink:0;
  border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--bg-elev) 0);
  display:grid;place-items:center;
  box-shadow:0 0 30px -8px var(--accent-glow),inset 0 0 0 5px var(--bg-deep);
  transition:background 1s cubic-bezier(.2,.8,.2,1);
}
.score-ring::before{
  content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg-elev);
}
.score-ring span,.score-ring small{position:relative;z-index:1;text-align:center}
.score-ring span{font-size:2.5rem;font-weight:900;color:var(--accent);font-family:ui-monospace,monospace;line-height:1;display:block}
.score-ring small{font-size:.75rem;color:var(--text-soft);font-family:ui-monospace,monospace}
.score-label{flex:1;min-width:200px}
.score-verdict{font-size:1.2rem;font-weight:700;margin:0 0 .35rem;color:var(--text)}
.score-ring.grade-A{--c:var(--success)}
.score-ring.grade-B{--c:var(--accent)}
.score-ring.grade-C{--c:var(--secondary)}
.score-ring.grade-D{--c:var(--warn)}
.score-ring.grade-F{--c:var(--danger)}
.score-ring.grade-A{background:conic-gradient(var(--success) calc(var(--p) * 1%),var(--bg-elev) 0);box-shadow:0 0 30px -8px var(--success),inset 0 0 0 5px var(--bg-deep)}
.score-ring.grade-A span{color:var(--success)}
.score-ring.grade-C{background:conic-gradient(var(--secondary) calc(var(--p) * 1%),var(--bg-elev) 0);box-shadow:0 0 30px -8px var(--secondary),inset 0 0 0 5px var(--bg-deep)}
.score-ring.grade-C span{color:var(--secondary)}
.score-ring.grade-D{background:conic-gradient(var(--warn) calc(var(--p) * 1%),var(--bg-elev) 0);box-shadow:0 0 30px -8px var(--warn),inset 0 0 0 5px var(--bg-deep)}
.score-ring.grade-D span{color:var(--warn)}
.score-ring.grade-F{background:conic-gradient(var(--danger) calc(var(--p) * 1%),var(--bg-elev) 0);box-shadow:0 0 30px -8px var(--danger),inset 0 0 0 5px var(--bg-deep)}
.score-ring.grade-F span{color:var(--danger)}

.result-block{
  margin:.6rem 0;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.7rem 1rem;transition:border-color var(--tween);
}
.result-block[open]{border-color:var(--border-strong)}
.result-block summary{cursor:pointer;font-weight:700;color:var(--accent);padding:.15rem 0;list-style:none;display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.result-block summary::before{content:"▸";display:inline-block;transition:transform var(--tween);color:var(--text-soft)}
.result-block[open] summary::before{transform:rotate(90deg)}
.feedback-list,.tips-list{margin:.6rem 0 0;padding-left:1.4rem;color:var(--text-muted);font-size:.9rem;line-height:1.6}
.feedback-list li{margin:.25rem 0}
.feedback-list .fb-good{color:var(--success)}
.feedback-list .fb-bad{color:var(--danger)}
.feedback-list .fb-neutral{color:var(--text-muted)}
#reference-prompt{
  margin:.6rem 0;padding:.85rem 1rem;background:var(--bg-deep);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text);font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.82rem;line-height:1.55;white-space:pre-wrap;overflow-x:auto;
}
#reference-notes{font-size:.82rem;color:var(--text-soft);margin:.4rem 0 0}
.result-cta{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}

/* ─── Écran fin ─── */
.end-score{display:flex;align-items:baseline;gap:.5rem;margin:.75rem 0;justify-content:center;text-align:center}
.end-num{font-size:4rem;font-weight:900;color:var(--accent);font-family:ui-monospace,monospace;line-height:1}
.end-unit{font-size:1.2rem;color:var(--text-soft);font-family:ui-monospace,monospace}
.end-recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.5rem;margin:1rem 0}
.recap-cell{padding:.5rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center}
.recap-cell strong{display:block;font-size:1.2rem;color:var(--accent);font-family:ui-monospace,monospace}
.recap-cell small{color:var(--text-soft);font-size:.7rem}
.end-cta{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}

@media (max-width:600px){
  .topbar .brand{font-size:1.5rem}
  .p-title{font-size:1.15rem}
  .layout{padding:0.75rem}
  .panel{padding:1rem 1.15rem}
  .score-ring{width:100px;height:100px}
  .score-ring span{font-size:2rem}
  .end-num{font-size:3rem}
}

/* Responsive canvas (audit fix) */
canvas{max-width:100%;height:auto;box-sizing:border-box}