/* TRUvector.net · socle visuel des univers (HUD, panneau, toasts, écrans pleins, lettre).
   Chaque jeu fixe sa teinte avec --accent / --accent2 dans sa propre feuille, chargée APRÈS celle-ci. */
:root{--nuit:#03020C;--nuit2:#0D0B26;--joint:#26225A;--violet:#8F6BFF;--cyan:#3FE0F5;--or:#F2C14E;--lampe:#FFD98A;--encre:#ECE8FF;--brume:#9C94C8;--accent:#3FE0F5;--accent2:#8FEFFA;
  --titre:"Chakra Petch","Segoe UI",system-ui,sans-serif;--texte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--nuit);color:var(--encre);font:400 1rem/1.6 var(--texte);overflow:hidden}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{font:inherit;color:inherit}
.cache{display:none!important}
#scene3d{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene3d:active{cursor:grabbing}

.hud{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:30;display:flex;gap:1rem;align-items:center;padding:.7rem 1rem;font:500 .88rem var(--titre)}
.hud-lien{color:var(--brume);text-decoration:none}.hud-lien:hover{color:var(--encre)}
.hud-titre{margin-left:auto;letter-spacing:.3em;color:var(--accent)}
.hud-choix{color:var(--brume);display:flex;gap:.4rem;align-items:center}
.hud-choix select{background:var(--nuit2);color:var(--encre);border:1px solid var(--joint);border-radius:3px;padding:.15rem .4rem;font:inherit}
.hud-btn{background:none;border:1px solid var(--joint);border-radius:999px;padding:.2rem .8rem;cursor:pointer;color:var(--brume)}
.hud-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}

/* panneau latéral : .journal (ancien nom .carnet accepté) */
.journal{position:fixed;z-index:25;right:1rem;top:calc(env(safe-area-inset-top,0px) + 3.4rem);bottom:1rem;width:min(372px,calc(100vw - 2rem));
  background:linear-gradient(180deg,rgba(10,9,34,.93),rgba(4,3,16,.95));border:1px solid rgba(63,224,245,.25);border-radius:6px;
  box-shadow:0 0 50px rgba(63,224,245,.12);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}
.journal-poignee{display:none}
.journal-corps{padding:1.1rem 1.2rem 1.2rem;overflow:auto}
.progres{list-style:none;margin:0 0 1rem;padding:0;display:flex;gap:.35rem}
.progres li{flex:1;height:6px;border-radius:3px;background:var(--joint)}
.progres li.fait{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.progres li.encours{background:var(--violet)}
.journal h2{font:700 1.3rem var(--titre);color:var(--accent);margin:0 0 .4rem}
.journal p{margin:0 0 .9rem}
.commandes{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .6rem}
.commandes input[type=text]{flex:1;min-width:0;background:#02010A;border:1px solid var(--joint);color:#fff;padding:.6rem .7rem;font:500 1.05rem var(--mono);border-radius:3px;text-transform:uppercase}
.commandes input[type=text]:focus{outline:none;border-color:var(--accent)}
.btn{background:rgba(63,224,245,.1);border:1px solid var(--accent);color:var(--accent);padding:.55rem 1rem;border-radius:3px;cursor:pointer;font-weight:700}
.btn:hover{background:rgba(63,224,245,.2)}
.btn-sec{background:none;border:1px solid var(--joint);color:var(--brume);padding:.5rem .9rem;border-radius:3px;cursor:pointer}
.btn-sec:hover{color:var(--encre);border-color:var(--brume)}
.btn-sec[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.plein-largeur{width:100%}

.retour{min-height:1.4em;color:var(--lampe)}
.retour.err{color:#FF8FA8}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
.indices{color:var(--lampe);font-size:.93rem;white-space:pre-line}

.signaux{border-top:1px solid var(--joint);padding-top:.6rem;margin-top:.6rem}
.signaux summary{cursor:pointer;color:var(--brume);font-weight:700}
.signaux .lettres{display:flex;gap:.4rem;margin:.6rem 0}
.signaux .lettres span{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:50%;font:700 1.05rem var(--titre);background:#0D0A24;color:transparent;border:1px solid var(--joint)}
.signaux .lettres span.on{background:radial-gradient(circle at 50% 35%,#fff,var(--accent) 55%,#15607a);color:#021018;box-shadow:0 0 14px rgba(63,224,245,.5)}
.signaux p{font-size:.92rem;color:var(--brume);margin:.3rem 0}
.aide-vue{font-size:.82rem;color:var(--brume);margin-top:1rem!important}

#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 3.3rem);transform:translate(-50%,-16px);z-index:60;max-width:min(92vw,560px);
  background:rgba(3,2,12,.94);border:1px solid var(--accent);color:var(--accent2);padding:.7rem 1.1rem;border-radius:4px;font:600 .95rem var(--titre);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center}
#toast.vu{opacity:1;transform:translate(-50%,0)}
.plein{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1.2rem;background:var(--nuit);text-align:center}
.plein-titre{font:700 2rem var(--titre);color:var(--accent);margin:0 0 .6rem;text-shadow:0 0 30px rgba(63,224,245,.4);letter-spacing:.12em}
.plein a{color:var(--lampe)}
.lettre{background:rgba(3,2,12,.72);backdrop-filter:blur(4px)}
.papier{max-width:34rem;background:linear-gradient(180deg,#f3f7ff,#dde6f5);color:#1c2438;padding:1.8rem 2rem;border-radius:3px;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 80px rgba(63,224,245,.18);max-height:85vh;overflow:auto}
.papier h2{font:700 1.5rem var(--titre);margin:0 0 1rem;color:#1c3a58}
.papier p{font:400 1.08rem/1.7 Georgia,"Times New Roman",serif;margin:0 0 .9rem}
.papier p:last-of-type{font-style:italic;text-align:right}
.papier .btn{background:#1c3a58;color:#f3f7ff;border-color:#1c3a58}

@media (max-width:760px){
  .hud{gap:.55rem;font-size:.78rem;padding:.5rem .7rem .9rem;background:linear-gradient(180deg,rgba(3,2,12,.94) 0%,rgba(3,2,12,.8) 65%,rgba(3,2,12,0) 100%)}
  .hud-titre{display:none}
  .hud-choix{margin-left:auto;font-size:0}
  .hud-choix select{font-size:.78rem}
  .journal{top:auto;bottom:0;right:0;left:0;width:auto;max-height:52vh;border-radius:12px 12px 0 0;border-bottom:none;padding-bottom:env(safe-area-inset-bottom,0px)}
  .journal-poignee{display:block;background:none;border:none;color:var(--accent);font:700 .95rem var(--titre);padding:.7rem 1rem .3rem;text-align:left;cursor:pointer}
  .journal-poignee::before{content:"";display:block;width:3rem;height:4px;border-radius:2px;background:var(--joint);margin:0 auto .5rem}
  .journal.replie .journal-corps{display:none}
  .journal-corps{padding-top:.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}