:root{
  --bg:#050506;
  --fg:#f2f5f4;
  --muted:#8b9691;
  --acc:#00ff88;
  --acc-rgb:0,255,136;   /* stesso accento in forma RGB, per gli rgba() */
  --acc2:#ff0055;
  --acc3:#00d9ff;
  --tile:rgba(16,18,20,.72);
  --line:rgba(255,255,255,.08);
}
/* variante della stessa identica interfaccia, accento rosa (pagina /sara) */
body.pink{
  --acc:#ff66cc;
  --acc-rgb:255,102,204;
  --fg:#ffeaf7;
  --muted:#a58fa0;
  --line:rgba(255,255,255,.09);
}
body.pink .g2{background:rgba(140,90,255,.08)}
body.pink .term{background:rgba(10,4,8,.9)}
body.pink .pfp.noimg{background:linear-gradient(135deg,#3a1230,#1a0a16)}
/* l'avatar ha margini vuoti attorno al soggetto: zoom + ritaglio al centro */
body.pink .pfp img{transform:scale(1.45);transform-origin:center}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;
  min-height:100vh;overflow-x:hidden;cursor:none;
  display:grid;place-items:center;padding:2rem 1rem;
}
a,button,input{cursor:none}

/* ============ BACKDROP ============ */
#fx{position:fixed;inset:0;z-index:0}
.glow{position:fixed;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none}
.g1{width:520px;height:520px;background:rgba(var(--acc-rgb),.09);top:-160px;left:-120px;animation:drift1 17s ease-in-out infinite}
.g2{width:460px;height:460px;background:rgba(255,0,85,.07);bottom:-140px;right:-110px;animation:drift2 21s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(90px,120px)}}
@keyframes drift2{50%{transform:translate(-90px,-100px)}}

/* z-index 1: sotto il contenuto (#app e' a 3), sopra il canvas (0).
   Cosi' lo sfondo mantiene la texture CRT ma avatar e card restano puliti. */
.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 4px);
}
.vignette{
  position:fixed;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.9) 100%);
}
.crt{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0}
.crt.fire{animation:crtflash .3s steps(3)}
@keyframes crtflash{
  0%{opacity:.8;background:rgba(255,255,255,.07);transform:translateX(-7px)}
  50%{opacity:.8;background:rgba(var(--acc-rgb),.06);transform:translateX(8px)}
  100%{opacity:0;transform:none}
}
body.shake{animation:shake .26s steps(2)}
@keyframes shake{
  25%{transform:translate(-5px,2px)}50%{transform:translate(6px,-3px)}
  75%{transform:translate(-3px,-2px)}
}

/* ============ CURSOR ============ */
/* z-index sopra #boot (80), altrimenti il cursore custom sparisce
   dietro la schermata di ACCESS mentre body ha cursor:none */
#cur{
  position:fixed;top:0;left:0;z-index:100;pointer-events:none;
  width:8px;height:8px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 14px var(--acc);transform:translate(-50%,-50%);
}
#curRing{
  position:fixed;top:0;left:0;z-index:99;pointer-events:none;
  width:34px;height:34px;border:1px solid rgba(var(--acc-rgb),.45);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .18s,height .18s,border-color .18s;
}
#curRing.hot{width:58px;height:58px;border-color:var(--acc)}
/* sopra l'iframe Spotify (cross-origin) il mouse non e' tracciabile:
   nascondo il cursore custom e lascio quello di sistema */
#cur.off,#curRing.off{opacity:0;transition:opacity .15s}
.spotify-tile,.spotify-tile iframe{cursor:auto}
@media(hover:none){body,a,button,input{cursor:auto}#cur,#curRing{display:none}}

/* ============ BOOT / ACCESS GATE ============ */
#boot{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:#000;padding:1.2rem;
  transition:opacity .55s ease,visibility .55s;
}
#boot.gone{opacity:0;visibility:hidden}
body.booting{overflow:hidden;height:100vh}

.term{
  width:min(560px,100%);
  border:1px solid rgba(var(--acc-rgb),.28);border-radius:10px;
  background:rgba(3,8,5,.9);
  box-shadow:0 0 60px rgba(var(--acc-rgb),.14),inset 0 0 40px rgba(var(--acc-rgb),.04);
  overflow:hidden;animation:termIn .5s ease both;
}
@keyframes termIn{from{opacity:0;transform:translateY(14px) scale(.985)}}

.term-bar{
  display:flex;align-items:center;gap:.42rem;
  padding:.55rem .8rem;border-bottom:1px solid rgba(var(--acc-rgb),.18);
  background:rgba(var(--acc-rgb),.05);
}
.tb-dot{width:9px;height:9px;border-radius:50%;background:rgba(var(--acc-rgb),.35)}
.tb-title{
  margin-left:.55rem;font-size:.68rem;color:var(--muted);letter-spacing:.12em;
}

#termOut{
  margin:0;padding:1.1rem 1.1rem .4rem;
  font-family:inherit;font-size:.78rem;line-height:1.85;
  color:var(--acc);white-space:pre-wrap;word-break:break-word;
  text-shadow:0 0 10px rgba(var(--acc-rgb),.45);min-height:9.5em;
}
#termOut .ok{color:#e6fff0}
#termOut .cbar{
  display:inline-block;width:.6ch;background:var(--acc);
  animation:blink .8s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

#accessBtn{
  display:block;width:calc(100% - 2.2rem);margin:.5rem 1.1rem 1.2rem;
  padding:.85rem 1rem;border:1px solid var(--acc);border-radius:8px;
  background:rgba(var(--acc-rgb),.08);color:var(--acc);
  font-family:inherit;font-size:.86rem;font-weight:700;letter-spacing:.28em;
  transition:.2s;animation:btnIn .35s ease both;
}
@keyframes btnIn{from{opacity:0;transform:translateY(8px)}}
#accessBtn:hover{
  background:var(--acc);color:#03150c;
  box-shadow:0 0 26px rgba(var(--acc-rgb),.5);
}
#accessBtn:active{transform:scale(.985)}


/* ============ APP ============ */
#app{
  position:relative;z-index:3;width:100%;max-width:660px;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}

/* ============ PROFILE ============ */
.profile{
  width:100%;display:flex;align-items:center;gap:1.1rem;
  padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:18px;
  background:var(--tile);backdrop-filter:blur(14px);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}
.pfp{position:relative;flex:0 0 88px;width:88px;height:88px;border-radius:14px;overflow:hidden}
.pfp img{width:100%;height:100%;object-fit:cover}
.pfp.noimg{
  background:linear-gradient(135deg,#12351f,#0a1a12);
  border:1px solid var(--line);
}
.pfp.noimg::after{
  content:'DB';position:absolute;inset:0;display:grid;place-items:center;
  font-weight:700;font-size:1.5rem;color:var(--acc);opacity:.65;
}
.dot-online{
  position:absolute;right:6px;bottom:6px;width:12px;height:12px;border-radius:50%;
  background:var(--acc);border:2px solid #0b0d0c;box-shadow:0 0 10px var(--acc);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.45;transform:scale(.85)}}

.pinfo{min-width:0}
.pname{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.glitch{
  position:relative;font-weight:800;
  font-size:clamp(1.7rem,7vw,2.5rem);line-height:1.05;letter-spacing:-.04em;
  text-transform:lowercase;
  text-shadow:0 0 8px rgba(var(--acc-rgb),.9),0 0 28px rgba(var(--acc-rgb),.5);
  animation:flicker 4.5s infinite steps(1);
}
@keyframes flicker{
  0%,96%,100%{opacity:1}
  97%{opacity:.35}
  98%{opacity:1}
  99%{opacity:.6}
}
/* fetta della stessa scritta che scivola fuori asse, senza colore */
.glitch::before{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  color:var(--fg);background:transparent;overflow:hidden;opacity:0;
}
.glitch.tear::before{
  opacity:.85;clip-path:inset(42% 0 40% 0);transform:translateX(-10px);
}

.badges{display:flex;gap:.3rem}
.badge{
  display:grid;place-items:center;min-width:26px;height:26px;padding:0 .35rem;
  border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);
  font-size:.62rem;color:var(--muted);transition:.2s;
}
.badge:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}

.pstatus{
  margin-top:.35rem;font-size:.82rem;color:var(--fg);opacity:.85;letter-spacing:.04em;
}
.pjoined{margin-top:.15rem;font-size:.7rem;color:var(--muted);letter-spacing:.1em}

/* ============ DUO TILES ============ */
.duo{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tile{
  border:1px solid var(--line);border-radius:16px;background:var(--tile);
  backdrop-filter:blur(14px);overflow:hidden;transition:.25s;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.tile:hover{border-color:rgba(var(--acc-rgb),.35);transform:translateY(-3px)}
.status-tile{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem}
.tile-ic{
  flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;background:rgba(var(--acc-rgb),.1);border:1px solid var(--line);
}
.tile-ic svg{width:22px;height:22px;fill:var(--acc)}
.tile-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.tile-txt strong{font-size:.9rem;font-weight:700}
.tile-txt span{font-size:.72rem;color:var(--muted);letter-spacing:.08em}
.spotify-tile{padding:.55rem .6rem;display:flex;align-items:center}
.spotify-tile iframe{border-radius:10px;display:block}

/* ============ SOCIALS ============ */
.socials{display:flex;gap:.8rem;margin-top:.5rem}
.socials a{
  position:relative;width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:14px;background:var(--tile);
  backdrop-filter:blur(10px);transition:.22s;overflow:hidden;
}
.socials svg{width:21px;height:21px;fill:var(--muted);transition:.22s;z-index:1}
/* icone da font (bootstrap-icons) usate nella pagina /sara */
.socials i{font-size:20px;color:var(--muted);transition:.22s;z-index:1;line-height:1}
.socials a:hover i{color:var(--acc);text-shadow:0 0 8px var(--acc)}
body.pink .pfp.noimg::after{content:'S'}

/* attribuzione richiesta dalla licenza gratuita dell'icona */
.credit{
  margin-top:1.6rem;text-align:center;
  font-size:.62rem;letter-spacing:.14em;color:var(--muted);opacity:.5;
  border:0;padding:0;
}
.credit a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.credit a:hover{color:var(--acc)}

/* card PlayStation della pagina /sara: logo grande + id sotto, centrati */
.psn-card{text-align:center;padding-top:1.9rem}
.psn-h{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  margin-bottom:.7rem;
}
.psn-h i{font-size:2.2rem;color:var(--acc);line-height:1}
.psn-ids{line-height:1.7!important}
.psn-ids b{
  display:block;
  font-weight:400;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);opacity:.7;
  margin-top:.5rem;
}
.psn-card .tags{justify-content:center}
.socials a::after{
  content:'';position:absolute;inset:0;opacity:0;transition:.22s;
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.9),rgba(var(--acc-rgb),.2));
}
.socials a:hover{border-color:var(--acc);transform:translateY(-6px) scale(1.07)}
.socials a:hover::after{opacity:.16}
.socials a:hover svg{fill:var(--acc);filter:drop-shadow(0 0 6px var(--acc))}

/* ============ META ============ */
.meta{
  display:flex;align-items:center;gap:.7rem;margin-top:.3rem;
  font-size:.76rem;color:var(--muted);letter-spacing:.1em;
}
.meta span{display:flex;align-items:center;gap:.4rem}
.meta svg{width:15px;height:15px;fill:var(--muted)}
.meta b{color:var(--fg);font-weight:400}
.sep{opacity:.35}

/* ============ PROJECTS ============ */
.toggle-proj{
  margin-top:1.4rem;font-size:.74rem;color:var(--muted);
  letter-spacing:.22em;text-decoration:none;transition:.2s;
}
.toggle-proj:hover{color:var(--acc)}
#projects{width:100%;margin-top:.4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.card{
  position:relative;display:block;text-decoration:none;color:inherit;
  padding:1.4rem 1.2rem;border:1px solid var(--line);border-radius:14px;
  background:var(--tile);backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .28s,border-color .28s,box-shadow .28s,opacity .5s;
  opacity:0;transform:translateY(20px);
}
.card.in{opacity:1;transform:none}
.card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:.28s;
  background:linear-gradient(135deg,rgba(255,0,85,.12),transparent 45%,rgba(0,217,255,.12));
}
.card:hover{border-color:var(--acc);box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 24px rgba(var(--acc-rgb),.14)}
.card:hover::before{opacity:1}
.card-idx{position:absolute;top:.9rem;right:1rem;font-size:.64rem;color:var(--muted);letter-spacing:.16em}
.card h3{font-size:1rem;margin-bottom:.45rem;position:relative}
.card p{font-size:.76rem;color:var(--muted);line-height:1.6;position:relative}
.tags{display:flex;gap:.35rem;margin-top:.9rem;position:relative;flex-wrap:wrap}
.tags span{
  font-size:.6rem;padding:.2rem .55rem;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);letter-spacing:.1em;
}

/* ============ RESPONSIVE ============ */
@media(max-width:560px){
  .profile{flex-direction:column;text-align:center;gap:.9rem}
  .pname{justify-content:center}
  .duo{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .card{opacity:1;transform:none}
}