/* 0xProto pour le texte, Pixelify Sans pour les onglets et titres (SIL OFL 1.1, licences dans fonts/) */
@font-face{font-family:"0xProto";src:url(fonts/0xproto-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"0xProto";src:url(fonts/0xproto-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(fonts/pixelify-600.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#000;
  --ink:#ece8ff;          /* texte fort */
  --mute:#9b93c4;         /* texte courant */
  --dim:#6c64a0;          /* texte secondaire */
  --line:#2a2550;         /* filets */
  --glow:#b9a6ff;         /* halo */
  --panel:rgba(9,7,22,.72);
  --px:"Pixelify Sans","0xProto",ui-monospace,monospace;   /* onglets, titres */
  --vt:"0xProto",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--mute);overflow-x:clip;max-width:100%}   /* rien ne dépasse en largeur : pas de zoom arrière sur mobile */
body{font-family:var(--vt);font-size:16px;line-height:1.4;overflow-x:hidden}
::selection{background:#4a3d99;color:#fff}

#sky,#sky-b1,#sky-b2,#sky-cat{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:0}
/* fond cosmos opaque : noir + nébuleuses très discrètes, peint par un calque fixe (opaque même dans les navigateurs à fond transparent) */
.cosmos{position:fixed;inset:-2px;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 45% 35% at 18% 22%,rgba(90,50,180,.16),transparent 70%),
  radial-gradient(ellipse 40% 30% at 82% 30%,rgba(40,90,170,.12),transparent 70%),
  radial-gradient(ellipse 55% 40% at 65% 85%,rgba(150,50,140,.10),transparent 70%),
  radial-gradient(ellipse 30% 25% at 35% 70%,rgba(60,40,140,.10),transparent 70%),
  #000}   /* ✏️ couleurs / intensité des nébuleuses */
/* vignette : bords assombris, recentre le regard */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
#sky-b1{filter:blur(5px) brightness(1.5);mix-blend-mode:screen}
#sky-cat{filter:drop-shadow(0 0 3px rgba(185,166,255,.45))}   /* chat : opaque ; passe devant l'interface quand il s'approche (z-index réglé par space.js) */
html.on-cat,html.on-cat *{cursor:pointer!important}
#sky-b2{filter:blur(20px) brightness(2.2);mix-blend-mode:screen}
@media (max-width:700px){#sky-b2{display:none}#sky-b1{filter:blur(3px) brightness(1.7)}}
body>main,body>header,body>footer{position:relative;z-index:1}

/* entrée en paliers */
@keyframes boot{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.in{animation:boot .5s steps(5) both}
.in2{animation:boot .5s steps(5) .15s both}
.in3{animation:boot .5s steps(5) .3s both}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shake .35s steps(5)}

a{color:inherit}
.notch{clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,
  100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,
  4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}
.ico{display:block;flex:none;fill:currentColor}

/* lien "glow" : pas de boîte, uniquement un effet au survol */
.glow{color:var(--mute);text-decoration:none;transition:color .15s steps(3),text-shadow .15s steps(3),transform .15s steps(3)}
.glow .ico{transition:filter .15s steps(3),transform .15s steps(3)}
.glow:hover,.glow:focus-visible{outline:none;color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--glow),0 0 24px var(--glow),0 0 44px rgba(185,166,255,.6);animation:flick .22s steps(3)}
@keyframes flick{0%{opacity:.55}34%{opacity:1}67%{opacity:.75}100%{opacity:1}}
.glow:hover .ico,.glow:focus-visible .ico{color:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 16px var(--glow))}

/* ===== HUD : petit logo lisible + liens, en haut à gauche (hors accueil) ===== */
.hud-logo,.hudnav,.who{position:fixed;z-index:4;transition:opacity .35s steps(5),transform .35s steps(5)}
.hud-logo{top:14px;left:20px;display:block;text-decoration:none}
/* le E de l'accueil en miniature, qui oscille (dessiné par logo.js) */
.hud-logo canvas{display:block;width:50px;height:60px;image-rendering:pixelated;filter:drop-shadow(0 0 3px rgba(185,166,255,.7)) drop-shadow(0 0 10px rgba(185,166,255,.35));transition:filter .15s steps(2)}
.hud-logo:hover canvas,.hud-logo:focus-visible canvas{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px var(--glow))}
.hudnav{top:31px;left:88px;right:200px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px}   /* barre horizontale à droite du petit E */
.hudnav a{display:inline-flex;align-items:center;gap:8px;font:600 17px/1.2 var(--px);letter-spacing:.04em}
.hudnav a .ico{height:12px;width:auto}
.who{top:24px;right:26px;font:700 14px/1 var(--vt);color:var(--dim);display:flex;gap:14px;align-items:center}
body[data-view="feed"] .hudnav [data-go="feed"],body[data-view="cloud"] .hudnav [data-go="cloud"],body[data-view="games"] .hudnav [data-go="games"],body[data-view="tools"] .hudnav [data-go="tools"],
body[data-view="art"] .hudnav [data-go="art"],body[data-view="websites"] .hudnav [data-go="websites"],body[data-view="moderation"] .modlink{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.7),0 0 12px var(--glow)}
/* modération : en bas à gauche, à part des liens principaux */
.modlink{position:fixed;left:26px;bottom:22px;z-index:4;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--px);letter-spacing:.04em}
.modlink .ico{height:12px;width:auto}
body[data-view="home"] .hud-logo,body[data-view="home"] .hudnav{opacity:0;pointer-events:none;transform:translateY(-8px)}
body[data-view="home"] .hud-logo{transform:scale(1.6) translateY(40px)}
@media (max-width:1060px){
  .hud-logo,.hudnav,.who{position:absolute}
  .hud-logo canvas{width:40px;height:48px}
  .hudnav{top:26px;left:76px;gap:8px 20px;right:150px}
  .hudnav a{font-size:16px}
  .modlink{position:absolute;top:auto;bottom:auto;left:auto;right:26px;top:56px}
}
@media (max-width:560px){
  .hud-logo{top:12px;left:12px}
  .hud-logo canvas{width:34px;height:41px}
  .hudnav{top:62px;left:16px;right:16px;gap:6px 14px}
  .hudnav a{font-size:15px}
  .hudnav a .ico{display:none}
  .who{top:20px;right:16px;font-size:12px}
  .modlink{top:auto;bottom:auto;right:16px;top:44px;font-size:13px}
}

/* ===== vues : on passe de l'une à l'autre pendant le vol de la caméra ===== */
.view.page{max-width:820px;margin:0 auto;padding:96px 24px 100px;position:relative}   /* ✏️ largeur du contenu */
/* voile sombre derrière la colonne de contenu : le texte reste lisible devant les objets 3D */
.view.page::before{content:"";position:fixed;top:0;bottom:0;left:50%;width:min(1040px,100vw);transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(2,1,8,.72) 14%,rgba(2,1,8,.72) 86%,transparent)}
@media (max-width:1060px){.view.page{padding-top:84px}}
@media (max-width:560px){
  /* mobile : le haut de l'écran montre l'objet 3D du lieu, le contenu commence dessous */
  .view.page{padding-top:34vh}
  .view.page[data-view="login"]{padding-top:110px}   /* pas d'objet 3D sur la connexion */
  .view.page::before{background:linear-gradient(transparent 18vh,rgba(2,1,8,.72) 34vh)}
}
.view[data-view="home"]{padding:67vh 20px 0;display:flex;flex-direction:column;align-items:center}
@media (max-height:760px){.view[data-view="home"]{padding-top:66vh}.homenav{gap:8px}.homenav a{font-size:17px}}
/* en descendant : les silhouettes sous l'arbre (masque noir) */
.stargaze{width:100%;margin-top:75vh;display:flex;justify-content:center;position:relative;overflow:hidden}
.stargaze img{display:block;width:min(960px,100%);   /* 320 px x3 sur ordi */
  /* l'image a son propre ciel : ses bords se fondent dans le fond du site */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 22%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 22%);mask-composite:intersect;image-rendering:pixelated;margin-bottom:-2px}
.stargaze::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(transparent,#000);pointer-events:none}
/* liste verticale de liens sous le logo */
.homenav{display:flex;flex-direction:column;align-items:center;gap:11px}   /* ✏️ espacement des liens */
.homenav a{display:inline-flex;align-items:center;gap:12px;font:600 19px/1.2 var(--px);letter-spacing:.05em;white-space:nowrap}
.homenav a:hover,.homenav a:focus-visible{transform:translateY(-2px)}
.homenav a:hover .ico:first-child,.homenav a:focus-visible .ico:first-child{transform:translateX(-3px)}
.homenav a:hover .ico:last-child,.homenav a:focus-visible .ico:last-child{transform:translateX(3px)}
.view.leaving{animation:vout .4s steps(6) forwards}
.view.entering{animation:vin .6s steps(8) both}
@keyframes vout{to{opacity:0;transform:scale(.96) translateY(-10px);filter:blur(1px)}}
@keyframes vin{from{opacity:0;transform:scale(1.04) translateY(12px)}to{opacity:1;transform:none}}
[hidden]{display:none!important}

.title{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 8px;font:600 28px/1 var(--px);color:var(--ink);letter-spacing:.06em;
  text-shadow:0 0 8px rgba(185,166,255,.55),0 0 26px rgba(185,166,255,.35)}
.title .ico{filter:drop-shadow(0 0 6px rgba(185,166,255,.7))}
.sub{text-align:center;color:var(--dim);margin:0 0 30px;font-size:15px}
@media (max-width:560px){.title{font-size:25px;gap:12px;margin-top:10px}.sub{margin-bottom:40px}}

/* boutons / champs pixel */
.btn{font:700 13px/1 var(--vt);letter-spacing:.06em;color:var(--ink);background:none;border:0;padding:10px 4px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.glow:focus-visible{outline:none}
.field{width:100%;font:16px/1.3 var(--vt);color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:8px 2px;outline:none;transition:border-color .15s steps(2)}
.field:focus{border-color:var(--glow)}
.field::placeholder{color:var(--dim)}

.toast{font-weight:700;clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:5;font:700 14px/1.5 var(--vt);color:var(--ink);
  background:var(--panel);padding:12px 16px;border-left:2px solid var(--glow);opacity:0;pointer-events:none;transition:opacity .2s steps(3)}
.toast.on{opacity:1}
.toast.err{border-color:#ff6b8a}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== texte jaune du logo, façon Minecraft ===== */
.splash{position:fixed;z-index:2;pointer-events:none;white-space:nowrap;transition:opacity .15s steps(2);font:600 var(--fs,20px)/1 var(--px);color:#ffff55;
  text-shadow:.13em .13em 0 #3f3f15;transform:translate(-30%,-40%) rotate(-18deg);opacity:0;transition:opacity .3s steps(3)}
.splash.on{opacity:1;animation:splashpulse .55s ease-in-out infinite alternate}
@keyframes splashpulse{from{transform:translate(-30%,-40%) rotate(-18deg) scale(1)}to{transform:translate(-30%,-40%) rotate(-18deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.splash.on{animation:none}}
/* lettres tapées une par une après le tour du E */
.splash span{display:inline-block;opacity:0}
.splash.typed span{animation:letterpop .22s steps(3) forwards}
@keyframes letterpop{0%{opacity:0;transform:translateY(-.5em) scale(1.6)}60%{opacity:1;transform:translateY(.05em) scale(.9)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.splash span{opacity:1}.splash.typed span{animation:none}}