:root { --bg:#0f1020; --panel:#181a30; --ink:#e8e8f0; --dim:#9a9ab0; --accent:#7ee081; --eval:#ff9f43; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 system-ui,sans-serif; }
header { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--panel); }
h1 { font-size:18px; margin:0; letter-spacing:1px; }
#tick { color:var(--dim); font-variant-numeric:tabular-nums; }
.dot { width:9px; height:9px; border-radius:50%; background:#666; }
.dot.on { background:var(--accent); }
main { display:flex; gap:18px; padding:16px; flex-wrap:wrap; }
.world canvas { width:640px; max-width:100%; image-rendering:pixelated; background:#0a0b16; border:2px solid #2a2d4d; cursor:crosshair; }
.hint { color:var(--dim); margin:6px 0; }
.controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.speed { display:flex; gap:4px; background:#14162a; border-radius:6px; padding:3px; }
.speed button { padding:6px 10px; background:transparent; }
.speed button.on { background:#3a3e66; }
#journal { list-style:none; margin:6px 0; padding:0; max-height:180px; overflow:auto; font-size:12px; color:var(--dim); }
#journal li { padding:3px 0; border-bottom:1px solid #242746; font-variant-numeric:tabular-nums; }
button { background:#2a2d4d; color:var(--ink); border:0; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px; }
button:hover { background:#3a3e66; }
button.danger { background:#5d2733; }
button.danger:hover { background:#7a3343; }
aside { width:340px; background:var(--panel); padding:14px; border-radius:8px; }
h2 { font-size:15px; margin:0 0 8px; }
h3 { font-size:13px; margin:14px 0 6px; color:var(--dim); text-transform:uppercase; letter-spacing:1px; }
.badge { font-size:11px; padding:2px 8px; border-radius:10px; background:#2a2d4d; }
.badge.eval { background:var(--eval); color:#201200; }
.badge.baseline { background:#555; }
table { width:100%; border-collapse:collapse; }
td { padding:4px 0; border-bottom:1px solid #242746; }
td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
#chart { width:100%; image-rendering:pixelated; background:#0a0b16; border:1px solid #2a2d4d; margin-top:4px; }
.note { color:var(--dim); font-size:12px; }

#login, #birth { position:fixed; inset:0; background:rgba(10,11,22,.94); display:flex; align-items:center; justify-content:center; z-index:10; overflow:auto; }
#login[hidden], #birth[hidden] { display:none; }
#loginForm, #birthForm { background:var(--panel); padding:28px; border-radius:10px; text-align:center; max-width:430px; }
#birthForm .big { font-size:17px; margin:0 0 6px; }
#loginForm input[type=text], #loginForm input[type=password], #birthName { display:block; margin:12px auto; padding:9px; width:260px; background:#0a0b16; border:1px solid #2a2d4d; color:var(--ink); border-radius:6px; font-size:15px; text-align:center; }
.sliders { text-align:left; margin:10px 0; }
.sliders label { display:block; margin:8px 0; font-size:13px; color:var(--dim); }
.sliders label span { float:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.sliders input[type=range] { width:100%; accent-color:var(--accent); }
.err { color:#e74c3c; font-size:13px; }

/* Responsive : colonne unique sous 1050px, canvas pleine largeur, cibles tactiles */
@media (max-width: 1050px) {
  main { flex-direction:column; padding:10px; gap:12px; }
  aside { width:100%; }
  .world canvas { width:100%; height:auto; }
  button { padding:12px 16px; font-size:15px; }
  .speed button { padding:10px 14px; }
  h1 { font-size:16px; }
}