/* ecoheros.fun — pages simples (confidentialité, désinscription), même salle que l'accueil */
:root{
  color-scheme: dark;
  --velours:#2A0A12; --velours-2:#3D1320; --rideau:#8E1B2E; --laiton:#F2C66D; --billet:#F4E9D4; --encre:#1E0C10;
  --texte:#F3E6E0; --doux:#C9A9A6;
  --marquee:"Bungee", "Arial Black", Impact, sans-serif;
  --titre:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--velours)}
body{margin:0;color:var(--texte);font:400 18px/1.6 var(--titre);background:radial-gradient(1100px 520px at 50% -140px,#5A1726 0%,transparent 70%),var(--velours);min-height:100vh}
a{color:var(--laiton)}
:focus-visible{outline:3px solid var(--laiton);outline-offset:3px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 60px}
.marquee{padding:22px 0 18px;border-bottom:1px solid rgba(142,27,46,.7);display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:20}
.marquee > a{font:26px/1 var(--marquee);color:var(--laiton);letter-spacing:.04em;text-decoration:none}
.marquee > a span{color:var(--texte)}
h1{margin:48px 0 10px;font:800 clamp(38px,6vw,60px)/1 var(--titre);font-stretch:75%}
h2{margin:36px 0 8px;font:800 26px/1.1 var(--titre);font-stretch:80%;color:var(--laiton)}
p,li{color:var(--texte)}
.lead{color:var(--doux);font-size:20px}
.muted{color:var(--doux)}
.mono{font:400 13px var(--mono);color:var(--doux)}
ul{padding-left:1.2em}
.btn{appearance:none;border:0;border-radius:6px;background:var(--rideau);color:var(--billet);font:700 16px var(--titre);padding:12px 20px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#A42037}
.btn[disabled]{opacity:.6;cursor:wait}
.card{background:var(--billet);color:var(--encre);border-radius:8px;padding:22px;margin-top:24px;display:grid;gap:14px;max-width:560px}
.card p{color:var(--encre);margin:0}
footer{margin-top:60px;border-top:1px solid rgba(142,27,46,.7);padding-top:20px;font:400 13px var(--mono);color:var(--doux)}

/* Compte joueur */
.auth{display:grid;gap:12px;background:var(--billet);color:var(--encre);border-radius:8px;padding:20px 22px;max-width:460px;box-shadow:0 14px 22px rgba(0,0,0,.35)}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#e6d8bf;border-radius:6px;padding:3px}
.auth-switch button{appearance:none;border:0;background:transparent;color:#5b4a45;font:700 15px var(--titre);padding:8px;border-radius:4px;cursor:pointer}
.auth-switch button[aria-pressed="true"]{background:var(--billet);color:var(--encre)}
.auth-field{display:grid;gap:4px;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#5b4a45}
.auth-field input,.plain input{background:#fff;border:1px solid #d7c7ab;border-radius:6px;padding:11px 12px;color:var(--encre);font:500 17px var(--titre);text-transform:none;letter-spacing:0}
.auth-field input:focus-visible,.plain input:focus-visible{outline:2px solid var(--rideau);outline-offset:1px}
.auth-hint{margin:-6px 0 0;font:400 13px var(--mono);color:#5b4a45}
.auth-check{display:flex;gap:10px;align-items:flex-start;font:500 16px/1.4 var(--titre);color:var(--encre);cursor:pointer}
.auth-check input{accent-color:var(--rideau);width:18px;height:18px;margin-top:3px;flex:none}
.auth .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.auth-go{appearance:none;border:0;border-radius:6px;background:var(--rideau);color:var(--billet);font:700 16px var(--titre);padding:12px 18px;cursor:pointer}
.auth-go:hover{background:#A42037}
.auth-go[disabled]{opacity:.6;cursor:wait}
.auth-msg{margin:0;min-height:1.2em;font:600 15px var(--titre);color:var(--encre)}
.auth-msg.bad,.msg.bad{color:#A42037}
.auth-foot{margin:0;font:400 13px var(--mono);color:#5b4a45}
.auth-foot a,.card a{color:var(--rideau)}
.plays{display:grid;gap:14px;margin-top:18px}
.play{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;background:var(--velours-2);border-radius:8px;padding:12px;box-shadow:inset 0 0 0 1px rgba(242,198,109,.2)}
.play img{width:80px;height:120px;object-fit:cover;border-radius:4px;background:#15171B}
.play h3{margin:0;font:800 24px/1.05 var(--titre);font-stretch:80%}
.play .state{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--laiton);margin-top:4px}
.play p{margin:4px 0 0;color:var(--doux);font-size:16px}
@media (max-width:560px){ .play{grid-template-columns:64px 1fr} .play img{width:64px;height:96px} .play .btn{grid-column:1/-1;text-align:center} }
.settings{display:grid;gap:14px;max-width:560px}
.settings .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.ghost{background:transparent;color:var(--texte);box-shadow:inset 0 0 0 1px rgba(201,169,166,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.toggle{display:flex;gap:10px;align-items:center;font-size:17px;cursor:pointer}
.toggle input{accent-color:var(--laiton);width:20px;height:20px}
.danger summary{cursor:pointer;color:var(--doux);font-size:15px}
.msg{min-height:1.2em;margin:0;font-size:15px}
.msg.good{color:#9FE0B0}
.danger .msg.bad,.settings .msg.bad{color:#FF9A8E}