:root{--cyan:#75f4ff;--ivoire:#f3ead8;--or:#d9b36a;--fond:#060a18;--panneau:#080e1eeb}html,body{background:var(--fond);width:100%;height:100%;color:var(--ivoire);margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}canvas{display:block}#accueil{z-index:40;text-align:center;background:radial-gradient(at 50% 35%,#142242f5,#040710fc 70%);flex-direction:column;justify-content:center;align-items:center;padding:0 20px;transition:opacity .9s;display:flex;position:fixed;inset:0}#accueil.ferme{opacity:0;pointer-events:none}#accueil .etoiles{pointer-events:none;opacity:.5;background-image:radial-gradient(1px 1px at 12% 22%,#fff,#0000),radial-gradient(1px 1px at 78% 12%,#cfe6ff,#0000),radial-gradient(1.5px 1.5px at 55% 68%,#ffe9c4,#0000),radial-gradient(1px 1px at 30% 80%,#fff,#0000),radial-gradient(1px 1px at 88% 55%,#ffd687,#0000),radial-gradient(1.2px 1.2px at 42% 38%,#bcdcff,#0000),radial-gradient(1px 1px at 65% 30%,#fff,#0000),radial-gradient(1px 1px at 8% 60%,#fff2c3,#0000);position:absolute;inset:0}#accueil h1{letter-spacing:.28em;color:var(--ivoire);text-shadow:0 0 34px #d9b36a80;margin:0 0 6px;font-family:Georgia,Times New Roman,serif;font-size:clamp(26px,4.6vw,54px);font-weight:400}#accueil h2{letter-spacing:.08em;color:var(--or);margin:0 0 34px;font-family:Georgia,serif;font-size:clamp(13px,1.6vw,19px);font-style:italic;font-weight:400}#accueil .controles{color:#b9c6de;background:#0a122699;border:1px solid #75f4ff2e;border-radius:10px;margin-bottom:30px;padding:14px 26px;font-size:13.5px;line-height:1.9}#accueil .controles b{color:var(--cyan);font-weight:600}#porte{letter-spacing:.14em;color:#08101f;cursor:pointer;background:linear-gradient(#f3e3bd,#d9b36a);border:none;border-radius:8px;padding:15px 44px;font-family:Georgia,serif;font-size:19px;transition:transform .15s,box-shadow .15s;box-shadow:0 0 30px #d9b36a66}#porte:hover{transform:translateY(-2px);box-shadow:0 0 44px #d9b36aa6}#accueil .cyborg{letter-spacing:.34em;color:#ff6b61;text-transform:uppercase;opacity:.85;margin-top:34px;font-size:11.5px}#hud{z-index:20;pointer-events:none;opacity:0;transition:opacity .6s;position:fixed;inset:0}#hud.actif{opacity:1}body.photo #hud .masquable{opacity:0!important}#reticule{background:#f3ead8d9;border-radius:50%;width:5px;height:5px;margin:-2.5px;position:absolute;top:50%;left:50%;box-shadow:0 0 7px #75f4ffe6}#zone{letter-spacing:.3em;color:#f3ead8cc;text-shadow:0 1px 8px #000;font-family:Georgia,serif;font-size:15px;transition:opacity .4s;position:absolute;top:22px;left:50%;transform:translate(-50%)}#boutons{pointer-events:auto;gap:8px;display:flex;position:absolute;top:16px;right:18px}.bhud{color:var(--ivoire);cursor:pointer;letter-spacing:.05em;background:#080e1eb8;border:1px solid #75f4ff4d;border-radius:7px;padding:7px 13px;font-size:12.5px;transition:background .2s}.bhud:hover{background:#182846d9}.bhud.on{border-color:var(--cyan);color:var(--cyan)}#indice{letter-spacing:.06em;color:var(--cyan);opacity:0;text-shadow:0 0 12px #75f4ff99;background:#080e1ec7;border:1px solid #75f4ff59;border-radius:8px;padding:9px 20px;font-size:14px;transition:opacity .25s;position:absolute;bottom:13%;left:50%;transform:translate(-50%)}#indice.visible{opacity:1}#chargement{color:#7c8db0;letter-spacing:.2em;font-size:12px;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}#panneau{z-index:30;background:var(--panneau);opacity:0;pointer-events:none;border:1px solid #d9b36a73;border-radius:14px;width:min(560px,90vw);max-height:76vh;padding:28px 32px;transition:opacity .3s,transform .3s;position:fixed;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)scale(.96);box-shadow:0 0 60px #000c,inset 0 0 40px #d9b36a0d}#panneau.ouvert{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}#panneau h3{color:var(--or);letter-spacing:.12em;margin:0 0 4px;font-family:Georgia,serif;font-size:22px;font-weight:400}#panneau .soustitre{color:var(--cyan);letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px;font-size:12px}#panneau p{color:#d7dfee;margin:0 0 12px;font-size:14.5px;line-height:1.75}#panneau .canon{color:#9fb0cc;font-style:italic}#panneau b{color:var(--or)}#panneau .vert{color:#8cff9e}#panneau .fermer{color:#8fa0bd;cursor:pointer;background:0 0;border:none;font-size:22px;position:absolute;top:10px;right:14px}#panneau .fermer:hover{color:var(--ivoire)}#pause{z-index:35;backdrop-filter:blur(3px);background:#040710b8;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#pause.ouvert{display:flex}#pause .carte{background:var(--panneau);text-align:center;border:1px solid #d9b36a66;border-radius:14px;padding:30px 42px}#pause h3{letter-spacing:.2em;color:var(--or);margin:0 0 14px;font-family:Georgia,serif;font-weight:400}#pause p{color:#aebbd4;margin:0 0 20px;font-size:13.5px;line-height:1.9}#pause b{color:var(--cyan)}.bhud-lg{padding:10px 26px;font-size:15px}.back-codex{letter-spacing:.22em;text-transform:uppercase;color:#a9b8cf;border:1px solid #a9b8cf59;margin-top:18px;padding:6px 14px;font-size:11px;text-decoration:none;transition:color .2s,border-color .2s;display:inline-block}.back-codex:hover{color:var(--cyan);border-color:var(--cyan)}.tctl{display:none}@media (pointer:coarse){body.joue #tjoy{display:block}body.joue #tbtns{display:flex}#tjoy{left:max(16px,env(safe-area-inset-left));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 8px);z-index:40;touch-action:none;background:#060a186b;border:1px solid #75f4ff66;border-radius:50%;width:122px;height:122px;position:fixed}#tknob{background:#1e283cd9;border:1px solid #d9b36abf;border-radius:50%;width:52px;height:52px;position:absolute;top:35px;left:35px}#tbtns{right:max(16px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 8px);z-index:40;flex-direction:column;gap:12px;position:fixed}#tbtns button{cursor:pointer;width:60px;height:60px;color:var(--ivoire);touch-action:none;background:#060a188c;border:1px solid #75f4ff73;border-radius:50%;font-size:24px}#tbtns button:active{background:#75f4ff40}}@media (width<=700px){#accueil h1{font-size:clamp(22px,7vw,40px)}#accueil .controles{font-size:11px}#panneau{max-height:80dvh;overflow-y:auto}#pause .carte{max-height:86dvh;overflow-y:auto}}