:root{--bg:#020406;--s:#05080f;--p:#070b14;--b:#0d1825;--t:#b8ccd8;--m:#2a4455;
  --c1:#00e5ff;--c2:#8b5cf6;--c3:#f59e0b;--ok:#22c55e;--bad:#ef4444;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,sans-serif;background:var(--bg);color:var(--t)}
#app{display:flex;height:100vh;width:100vw}
#cv{position:relative;flex:1;min-width:0;overflow:hidden}
canvas{display:block;width:100%;height:100%}
#hud{position:absolute;top:0;left:0;right:0;pointer-events:none;padding:.9rem 1.1rem;display:flex;align-items:flex-start;justify-content:space-between}
#era{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.18rem}
#sname{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:1.25rem;font-weight:900;line-height:1}
#dots{display:flex;gap:.32rem;margin-top:.4rem;align-items:center}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--b);transition:all .4s}
.sdot.done{background:var(--c2)}.sdot.active{background:var(--c1);box-shadow:0 0 8px var(--c1);width:10px;height:10px}
#hud-r{text-align:right}
#ecnt{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.72rem;color:var(--c3)}
#pbadge{font-size:.58rem;color:var(--m);margin-top:.18rem}
#cwarn{position:absolute;top:.8rem;left:50%;transform:translateX(-50%);font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.6rem;letter-spacing:.12em;padding:.3rem .8rem;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);border-radius:20px;color:var(--bad);display:none}
#evo-bar{position:absolute;bottom:1.3rem;left:50%;transform:translateX(-50%);width:310px;pointer-events:none;opacity:0;transition:opacity .4s}
#evo-bar.show{opacity:1;pointer-events:all}
.evo-in{background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.35);border-radius:10px;padding:.65rem 1.1rem;text-align:center;backdrop-filter:blur(8px)}
.evo-lbl{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.58rem;letter-spacing:.18em;color:var(--c1);margin-bottom:.35rem}
.evo-prog{height:4px;background:var(--b);border-radius:2px;overflow:hidden;margin-bottom:.45rem}
.evo-fill{height:100%;background:linear-gradient(90deg,var(--c1),var(--c2));border-radius:2px;transition:width .15s}
#evo-skip{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.56rem;letter-spacing:.1em;padding:.28rem .85rem;border-radius:20px;border:1px solid var(--c1);background:rgba(0,229,255,.09);color:var(--c1);cursor:pointer;transition:all .2s}
#evo-skip:hover{background:var(--c1);color:#000}
#ef{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s;text-align:center}
#ef.show{opacity:1}
#ef-t{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:1rem;font-weight:700}
#ef-s{font-size:.72rem;color:var(--m);margin-top:.25rem}
#tr{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.7rem;background:rgba(0,0,0,.96);opacity:0;pointer-events:none;transition:opacity .35s}
#tr.show{opacity:1;pointer-events:all}
.tr-e{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.52rem;letter-spacing:.3em;text-transform:uppercase}
.tr-n{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:2rem;font-weight:900;text-align:center;line-height:1.1}
.tr-d{color:var(--m);font-size:.8rem;text-align:center;max-width:340px;line-height:1.65;margin-top:.3rem}
.tr-f{font-size:.68rem;font-style:italic;color:var(--c1);margin-top:.5rem}
#planet-picker{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#080020,#010308);overflow-y:auto;padding:1.5rem}
#planet-picker.hidden{display:none}
.pp-inner{max-width:860px;width:100%;text-align:center}
.pp-title{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.52rem;letter-spacing:.35em;text-transform:uppercase;color:var(--c1);margin-bottom:.5rem}
.pp-h{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.4rem}
.pp-sub{font-size:.8rem;color:var(--m);margin-bottom:2rem;line-height:1.5}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.85rem;margin-bottom:1.5rem}
.pcard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.1rem .85rem;cursor:pointer;transition:all .25s;text-align:left;position:relative;overflow:hidden}
.pcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.pcard.sel{border-color:var(--pc,var(--c1));box-shadow:0 0 0 1px var(--pc,var(--c1)),0 0 24px rgba(0,229,255,.2)}
.p-emoji{font-size:2rem;margin-bottom:.6rem;display:block}
.p-name{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.72rem;font-weight:700;letter-spacing:.07em;margin-bottom:.2rem}
.p-sub{font-size:.6rem;color:var(--m);margin-bottom:.7rem}
.p-cond{display:flex;flex-direction:column;gap:.22rem}
.p-cond span{font-size:.58rem;color:var(--m);padding:.15rem .45rem;background:rgba(255,255,255,.04);border-radius:3px;border-left:2px solid var(--pc,var(--c1));display:block}
.p-desc{font-size:.68rem;color:var(--t);line-height:1.55;margin-top:.6rem;opacity:.8}
.pp-start{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.78rem;letter-spacing:.18em;padding:.85rem 2.5rem;border-radius:30px;border:2px solid rgba(0,229,255,.35);cursor:pointer;background:rgba(0,229,255,.08);color:rgba(0,229,255,.5);font-weight:700;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.pp-start:hover{background:rgba(0,229,255,.14);border-color:var(--c1);color:var(--c1)}
.pp-start.ready{border-color:var(--c1);background:var(--c1);color:#000;box-shadow:0 0 25px rgba(0,229,255,.4)}
.pp-start.ready:hover{background:#00eeff;box-shadow:0 0 40px rgba(0,229,255,.6)}
@keyframes ppulse{0%,100%{box-shadow:0 0 25px rgba(0,229,255,.3)}50%{box-shadow:0 0 45px rgba(0,229,255,.6)}}
#ui{width:290px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--b);background:var(--p);overflow:hidden}
#ptop{padding:.8rem .9rem .55rem;border-bottom:1px solid var(--b)}
#ptop h1{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.85rem;font-weight:900;letter-spacing:.18em;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#ptop p{font-size:.56rem;color:var(--m);letter-spacing:.12em;margin-top:.12rem}
#spd-ctl{display:flex;gap:.28rem;margin-top:.5rem}
.spd{flex:1;padding:.28rem;font-size:.6rem;letter-spacing:.08em;font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;border:1px solid var(--b);background:transparent;color:var(--m);transition:all .2s}
.spd.act,.spd:hover{border-color:var(--c1);color:var(--c1)}
#pbody{flex:1;overflow-y:auto;padding:.65rem .85rem}
#pbody::-webkit-scrollbar{width:3px}
#pbody::-webkit-scrollbar-thumb{background:var(--b);border-radius:2px}
.slbl{font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--m);margin:.55rem 0 .3rem}
.rrow{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.03)}
.rl{display:flex;align-items:center;gap:.45rem}
.ri{font-size:.72rem;width:16px;text-align:center}
.rn{font-size:.66rem;color:var(--m)}
.rv{font-family:"Arial Black", "Helvetica Neue", system-ui, sans-serif,monospace;font-size:.68rem}
.ep{margin:.5rem 0}
.eplbl{display:flex;justify-content:space-between;font-size:.58rem;color:var(--m);margin-bottom:.28rem}
.epbar{height:4px;background:var(--s);border-radius:2px;overflow:hidden}
.epfill{height:100%;border-radius:2px;transition:width .6s}
#log{display:flex;flex-direction:column;gap:.22rem;max-height:130px;overflow:hidden}
.le{font-size:.62rem;line-height:1.45;padding:.18rem .38rem;border-left:2px solid var(--b);color:var(--m);animation:lin .3s ease}
@keyframes lin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.le.ev{border-color:var(--c3);color:var(--c3)}.le.evo{border-color:var(--c1);color:var(--c1)}
.le.d{border-color:var(--bad);color:var(--bad)}.le.b{border-color:var(--ok);color:var(--ok)}
#pstrip{padding:.4rem .85rem;border-bottom:1px solid var(--b);font-size:.6rem;display:flex;align-items:center;gap:.5rem;color:var(--m);background:rgba(0,0,0,.2)}
#pstrip .pe{font-size:.9rem}
#pstrip .pn{font-weight:600;color:var(--t)}
#pstrip button{margin-left:auto;font-size:.55rem;padding:.2rem .5rem;border-radius:4px;border:1px solid var(--b);background:transparent;color:var(--m);cursor:pointer;transition:all .2s}
#pstrip button:hover{border-color:var(--c1);color:var(--c1)}
#srow{padding:.55rem .85rem;border-top:1px solid var(--b);display:flex;gap:.28rem;flex-shrink:0}
.sbtn{flex:1;padding:.35rem;font-size:.58rem;letter-spacing:.06em;font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,sans-serif;font-weight:600;border-radius:4px;cursor:pointer;border:1px solid var(--b);background:transparent;color:var(--m);text-transform:uppercase;transition:all .2s}
.sbtn:hover{border-color:var(--c1);color:var(--c1)}.sbtn.d:hover{border-color:var(--bad);color:var(--bad)}
#sts{font-size:.52rem;color:var(--m);text-align:center;padding:.18rem .85rem .45rem}
#mars-overlay{position:absolute;inset:0;z-index:50;pointer-events:none;background:rgba(239,68,68,.1);display:none;animation:mcp .8s ease-in-out infinite}
@keyframes mcp{0%,100%{opacity:.5}50%{opacity:1}}

/* Retour menu — bouton flottant top-left */
.back-to-menu{position:fixed;top:.7rem;left:.7rem;z-index:9999;background:rgba(4,7,15,.85);color:#5dd4f7;border:1px solid rgba(93,212,247,.35);padding:.5rem .85rem;border-radius:8px;font-size:.78rem;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;letter-spacing:.02em;backdrop-filter:blur(6px);transition:background .15s,border-color .15s,transform .12s}
.back-to-menu:hover,.back-to-menu:focus-visible{background:rgba(93,212,247,.2);border-color:#5dd4f7;outline:none}
.back-to-menu:active{transform:translateY(1px)}
@media (max-width:600px){
  .back-to-menu{font-size:.7rem;padding:.4rem .65rem;top:.4rem;left:.4rem}
}