/* ============================================================
   SOFIET UNION — stile condiviso da tutte le pagine
   ============================================================ */
:root{
  --void:#020304; --ink:#08060e;
  --teal:#005e60; --teal2:#00d6c4; --purple:#24152f; --purple2:#4c3062;
  --pink:#ff46be; --pink2:#b44e99; --lime:#aaff28; --yel:#ffe228; --pale:#bde4dc;
  --mono:"Courier New",Courier,monospace;
  --main:min(1000px,calc(100% - 32px));
}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--pale);background:transparent;font:14px/1.45 var(--mono)}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%}
::selection{background:var(--pink);color:var(--void)}
::-webkit-scrollbar{width:14px}::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--teal2);border:3px double var(--void)}

/* ---------- fondo: quadri sovrapposti che respirano ---------- */
.psy-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.psy-bg i{position:absolute;inset:-20%;background-repeat:repeat;opacity:.17;
  filter:saturate(1.8) contrast(1.3);animation:bgdrift 40s linear infinite}
.psy-bg i:nth-child(1){background-image:url("complexdigital3-mini.jpg");background-size:420px;mix-blend-mode:screen}
.psy-bg i:nth-child(2){background-image:url("complexdigital1-mini.jpg");background-size:560px;mix-blend-mode:screen;animation-duration:55s;animation-direction:reverse;opacity:.13}
.psy-bg i:nth-child(3){background:radial-gradient(ellipse at 20% 30%,#ff46be33,transparent 40%),radial-gradient(ellipse at 80% 75%,#00d6c433,transparent 45%);opacity:1;animation:bghue 18s steps(12,end) infinite alternate}
@keyframes bgdrift{to{transform:translate(300px,-200px)}}
@keyframes bghue{to{filter:hue-rotate(160deg)}}

/* ---------- muri laterali: collage di quadri (solo schermi larghi) ---------- */
.wall{position:fixed;top:0;bottom:0;z-index:-2;width:calc((100vw - 1000px) / 2 - 18px);pointer-events:none;overflow:hidden;
  border-color:var(--pink);border-style:solid;border-width:0}
.wall.left{left:0;border-right-width:2px}
.wall.right{right:0;border-left-width:2px;border-color:var(--teal2)}
.wall i{position:absolute;inset:-30%;background-repeat:repeat;animation:wallflow var(--t,26s) steps(16,end) infinite alternate}
.wall i:nth-child(1){background-image:var(--w1);background-size:380px;filter:saturate(2.1) contrast(1.35)}
.wall i:nth-child(2){background-image:var(--w2);background-size:300px;mix-blend-mode:difference;--t:19s;animation-direction:alternate-reverse}
.wall i:nth-child(3){background-image:var(--w3);background-size:460px;mix-blend-mode:screen;opacity:.7;--t:33s}
.wall{animation:wallhue 9s steps(9,end) infinite alternate}
@keyframes wallflow{to{transform:translate(120px,-260px) rotate(3deg) scale(1.08)}}
@keyframes wallhue{to{filter:hue-rotate(150deg) saturate(1.5)}}
@media(max-width:1180px){.wall{width:12px}.wall i{animation:none}}

/* ---------- strato creature ---------- */
#vivarium{position:fixed;inset:0;z-index:20;width:100vw;height:100vh;pointer-events:none}
body.on-creature{cursor:crosshair}

/* ---------- testata ---------- */
.site{position:relative;z-index:5;width:var(--main);margin:0 auto;padding:0 clamp(0px,1.5vw,18px);background:#020304d0;box-shadow:0 0 0 2px #4c306288}
.top{padding:26px 0 8px;text-align:center}
.glyphline{margin:0 0 10px;color:var(--teal2);font-size:16px;letter-spacing:18px;white-space:nowrap;overflow:hidden}
.logo{display:flex;justify-content:center;flex-wrap:wrap;margin:0;text-decoration:none;animation:aura 3.2s steps(7,end) infinite}
.logo span{color:transparent;background-image:var(--a);background-size:520px;background-position:var(--x,50%) var(--y,50%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:2px var(--void);
  font:bold clamp(46px,10vw,132px)/.8 var(--mono);transform:translateY(var(--lift,0)) rotate(var(--turn,0)) scaleX(.92)}
.logo .gap{width:clamp(8px,2vw,22px)}
.logo.small span{font-size:clamp(34px,6vw,64px);-webkit-text-stroke:1.5px var(--void)}
@keyframes aura{0%,100%{filter:drop-shadow(10px 10px 0 var(--purple2)) drop-shadow(-6px -6px 0 var(--pink2))}
 35%{filter:drop-shadow(-12px 8px 0 var(--teal2)) drop-shadow(9px -8px 0 var(--pink)) hue-rotate(45deg)}
 70%{filter:drop-shadow(7px -12px 0 var(--pink)) drop-shadow(-10px 8px 0 var(--teal2)) hue-rotate(130deg)}}

/* ---------- navigazione ---------- */
.nav{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:22px 0 10px;padding:0}
.nav a{position:relative;display:block;padding:8px 11px;color:var(--void);background:var(--teal2);text-decoration:none;
  font:bold 12px/1 var(--mono);letter-spacing:1px;box-shadow:4px 4px var(--pink2);transition:transform .15s steps(3)}
.nav a:hover{background:var(--pink);transform:translate(-2px,-2px) rotate(-2deg);box-shadow:6px 6px var(--teal)}
.nav a[aria-current="page"]{color:var(--pale);background:var(--void);outline:2px solid var(--pink);box-shadow:4px 4px var(--teal2)}

/* ---------- titoli di sezione ---------- */
.room-title{margin:38px auto 6px;width:max-content;max-width:100%;padding:8px 12px;color:var(--void);background:var(--pink);
  font:bold clamp(15px,2.2vw,20px)/1 var(--mono);letter-spacing:3px;box-shadow:6px 6px var(--teal2)}
.room-note{max-width:560px;margin:14px auto 0;color:var(--pale);text-align:center;font-size:13px}
.orbit{margin:18px 0 0;color:var(--pink2);font-size:12px;letter-spacing:14px;text-align:center;white-space:nowrap;overflow:hidden}

/* ============================================================
   CORNICI: bordi fatti da altri quadri, psichedelici e stratificati
   ============================================================ */
.gallery{columns:3 250px;column-gap:clamp(34px,5vw,70px);margin:56px auto 80px;pointer-events:none}
.gallery.two{columns:2 280px}
.frame{position:relative;display:block;width:100%;margin:0 0 clamp(46px,6vw,80px);padding:clamp(14px,2.2vw,26px);
  break-inside:avoid;isolation:isolate;cursor:zoom-in;pointer-events:auto;border:0;background:none;
  transform:rotate(var(--tilt,0deg));transition:transform .25s steps(4,end)}
/* strato 1: due quadri fusi in "difference", scorrono */
.frame:before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--f1),var(--f2),var(--f3);
  background-size:var(--s1,230px),var(--s2,170px),var(--s3,300px);
  background-position:var(--p1,0 0),var(--p2,40% 60%),var(--p3,80% 20%);
  background-blend-mode:difference,screen,normal;
  border-radius:var(--rad,6px 14px 5px 11px);
  filter:saturate(2.1) contrast(1.35);
  animation:framelayer var(--ft,16s) linear infinite, framehue var(--fh,7s) steps(10,end) infinite alternate}
/* strato 2: un altro quadro ritagliato, storto, dietro */
.frame:after{content:"";position:absolute;inset:var(--back-inset,-10px -8px -12px -9px);z-index:-2;
  background:var(--f4) var(--p4,30% 40%)/var(--s4,260px);
  transform:rotate(var(--back-tilt,-2.5deg));opacity:.92;
  clip-path:polygon(0 3%,8% 0,30% 2%,55% 0,78% 3%,100% 0,98% 30%,100% 58%,97% 82%,100% 100%,70% 97%,44% 100%,20% 98%,0 100%,2% 70%,0 44%);
  filter:hue-rotate(var(--h4,0deg)) saturate(2.4) contrast(1.4);mix-blend-mode:screen}
@keyframes framelayer{to{background-position:calc(var(--px,0px) + 230px) 170px,-170px 170px,300px -300px}}
@keyframes framehue{to{filter:saturate(2.8) contrast(1.6) hue-rotate(140deg)}}
/* strato 3: scampolo di quadro incollato su un angolo */
.frame .scrap{position:absolute;z-index:3;width:clamp(42px,28%,96px);aspect-ratio:1/1.2;pointer-events:none;
  background:var(--f5) center/180px;box-shadow:3px 3px 0 var(--void);mix-blend-mode:hard-light;
  filter:saturate(2.2) contrast(1.4) hue-rotate(var(--h5,0deg));
  clip-path:polygon(4% 8%,96% 0,100% 88%,10% 100%,0 40%);animation:scrapwob 5s steps(5,end) infinite alternate}
.frame .scrap.tl{top:-18px;left:-18px;transform:rotate(-9deg)}
.frame .scrap.tr{top:-16px;right:-20px;transform:rotate(11deg)}
.frame .scrap.bl{bottom:-20px;left:-16px;transform:rotate(7deg)}
.frame .scrap.br{bottom:-18px;right:-18px;transform:rotate(-12deg)}
@keyframes scrapwob{to{filter:saturate(3) contrast(1.6) hue-rotate(calc(var(--h5,0deg) + 120deg))}}
/* il quadro vero resta pulito */
.frame img{position:relative;z-index:2;display:block;width:100%;height:auto;background:#11161a;
  outline:2px solid var(--void);box-shadow:0 0 0 4px var(--fc,var(--teal2)),8px 8px 0 4px var(--void)}
.frame .sigil{position:absolute;z-index:4;top:6px;right:8px;padding:1px 4px;color:var(--pink);background:var(--void);font-size:17px;line-height:1}
.frame:hover,.frame:focus-visible{z-index:6;transform:rotate(0) scale(1.03);outline:none}
.frame:hover:before,.frame:focus-visible:before{animation-duration:3s,.8s}
.frame:focus-visible img{box-shadow:0 0 0 4px var(--pink),8px 8px 0 4px var(--teal2)}
.frame.zap img{animation:zap .45s steps(5,end)}
@keyframes zap{50%{filter:hue-rotate(170deg) saturate(2.6) contrast(1.5);transform:scaleX(-1)}}
.sketchbook .frame img{filter:contrast(1.04)}

/* ---------- finestra quadro (lightbox) ---------- */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:14px;background:#020304e6}
.lightbox[hidden]{display:none}
.lb-win{position:relative;display:flex;flex-direction:column;max-width:min(1400px,96vw);max-height:94vh;
  border:3px solid var(--teal2);background:var(--purple);box-shadow:9px 9px var(--pink)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;color:var(--void);background:var(--teal2);font:bold 11px/1 var(--mono)}
.lb-bar button{padding:5px 8px;color:var(--pale);border:0;background:var(--void);cursor:pointer;font:bold 11px/1 var(--mono)}
.lb-bar button:hover{background:var(--pink);color:var(--void)}
.lb-bar .lb-tools{display:flex;gap:6px}
.lb-stage{position:relative;min-height:0;overflow:auto;padding:clamp(12px,2.4vw,30px);isolation:isolate}
.lb-stage:before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--f1),var(--f2);background-size:260px,190px;
  background-blend-mode:difference;filter:saturate(2.2) contrast(1.4);animation:framelayer 20s linear infinite,framehue 6s steps(10,end) infinite alternate}
.lb-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(94vh - 110px);object-fit:contain;margin:auto;cursor:zoom-in;outline:2px solid var(--void);box-shadow:0 0 0 4px var(--pink),0 0 0 9px var(--void)}
.lb-stage.zoom{display:block}.lb-stage.zoom img{max-width:none;max-height:none;cursor:zoom-out}
.lb-credit{padding:6px 8px;color:var(--teal2);background:var(--void);font-size:11px;text-align:right}
.lb-credit a{color:var(--pink);text-decoration:none}

/* ---------- spore / lente ---------- */
#spores{position:fixed;inset:0;z-index:70;pointer-events:none}
.spore{position:fixed;color:var(--teal2);font:bold 18px/1 var(--mono);text-shadow:1px 1px var(--pink);animation:spore .9s steps(6,end) forwards}
.spore:nth-child(2n){color:var(--pink);text-shadow:1px 1px var(--teal2)}
.spore:nth-child(3n){color:var(--lime)}
@keyframes spore{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(200deg)}}
#psy-lens{position:fixed;z-index:65;width:240px;height:240px;opacity:0;pointer-events:none;border:3px double var(--pink);border-radius:43% 57% 47% 53%;
  background:radial-gradient(circle,#ff46be88,transparent 30%,#00d6c466 58%,transparent 72%);mix-blend-mode:screen;
  backdrop-filter:hue-rotate(140deg) saturate(2.8) contrast(1.6);transform:translate(-50%,-50%);transition:opacity .2s;animation:lens 2.2s steps(8,end) infinite}
.psy-on #psy-lens{opacity:.85}
@keyframes lens{to{rotate:360deg;border-radius:55% 45% 60% 40%}}

/* ---------- home: portali ---------- */
.intro{max-width:640px;margin:18px auto 0;text-align:center;font-size:14px}
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(28px,4vw,52px);margin:60px auto 70px;pointer-events:none}
.portal{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:22px;text-decoration:none;
  isolation:isolate;pointer-events:auto;transform:rotate(var(--tilt,0deg));transition:transform .25s steps(4,end)}
.portal:before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--f1),var(--f2),var(--f3);background-size:var(--s1,300px),var(--s2,200px),var(--s3,360px);
  background-blend-mode:difference,screen;filter:saturate(2) contrast(1.35);border-radius:8px 16px 6px 12px;
  animation:framelayer 18s linear infinite,framehue 8s steps(10,end) infinite alternate}
.portal:after{content:"";position:absolute;inset:16px;z-index:-1;background:var(--f4) center/cover;outline:2px solid var(--void);box-shadow:0 0 0 4px var(--fc,var(--teal2))}
.portal b{align-self:flex-start;padding:7px 10px;color:var(--void);background:var(--fc,var(--teal2));font:bold 20px/1 var(--mono);letter-spacing:2px;box-shadow:5px 5px var(--void)}
.portal small{align-self:flex-start;margin-top:6px;padding:4px 7px;color:var(--pale);background:var(--void);font-size:11px}
.portal:hover,.portal:focus-visible{transform:rotate(0) scale(1.04);outline:none}
.portal:hover:before{animation-duration:3s,.8s}
.portal:focus-visible b{outline:3px dotted var(--pale)}

/* ---------- bottoni ---------- */
.btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px 0}
.btn{padding:8px 11px;color:var(--void);border:0;background:var(--teal2);cursor:pointer;text-decoration:none;font:bold 12px/1 var(--mono);box-shadow:4px 4px var(--pink2)}
.btn:hover{background:var(--pink)}
.btn.pink{background:var(--pink)}.btn.pink:hover{background:var(--lime)}
.btn.lime{background:var(--lime)}.btn.lime:hover{background:var(--teal2)}

/* ---------- acquario ---------- */
.tank-page .site{width:min(1100px,calc(100% - 24px))}
.tank-ui{position:fixed;left:50%;bottom:16px;z-index:30;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;width:max-content;max-width:calc(100% - 24px);
  padding:10px;transform:translateX(-50%);border:2px solid var(--teal2);background:#020304dd;box-shadow:6px 6px var(--pink2)}
.tank-ui .count{align-self:center;padding:0 6px;color:var(--teal2);font-size:12px}
.tank-hint{max-width:600px;margin:10px auto 0;text-align:center;font-size:13px}
.tank-page #vivarium{pointer-events:auto;z-index:4}
.tank-page .site{pointer-events:none}.tank-page .site a,.tank-page .site button{pointer-events:auto}

/* ---------- commenti ---------- */
.board{position:relative;max-width:760px;margin:50px auto 80px;padding:clamp(18px,3vw,34px);isolation:isolate}
.board:before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--f1),var(--f2);background-size:260px,180px;background-blend-mode:difference;
  filter:saturate(2) contrast(1.35);animation:framelayer 22s linear infinite,framehue 9s steps(10,end) infinite alternate}
.board:after{content:"";position:absolute;inset:clamp(12px,2vw,22px);z-index:-1;background:#020304f2;outline:2px solid var(--teal2);box-shadow:0 0 0 6px var(--void),8px 8px 0 6px var(--pink2)}
.board p{margin:0 0 12px}
#HCB_comment_box{margin-top:18px;color:var(--pale);font-family:var(--mono)}
#HCB_comment_box *{font-family:var(--mono)!important}
#HCB_comment_box a{color:var(--teal2)}
#HCB_comment_box textarea,#HCB_comment_box input.text,#HCB_comment_box input[type=text]{width:100%;max-width:100%;padding:8px;color:var(--pale);border:2px solid var(--teal2);background:var(--void)}
#HCB_comment_box textarea:focus,#HCB_comment_box input:focus{outline:2px solid var(--pink);outline-offset:2px}
#HCB_comment_box .submit,#HCB_comment_box input.submit,#HCB_comment_box button,#HCB_comment_box input[type=button],#HCB_comment_box input[type=submit]{color:var(--void)!important;background:var(--teal2)!important;border:0!important;padding:7px 11px;color:var(--void);border:0;background:var(--teal2);box-shadow:4px 4px var(--pink2);font:bold 12px var(--mono);cursor:pointer}
#HCB_comment_box .submit:hover,#HCB_comment_box input.submit:hover{background:var(--pink)}
#HCB_comment_box .comment{margin:14px 0;padding:10px;border-left:3px solid var(--pink);background:#24152f99}
#HCB_comment_box h3{color:var(--pink)}

/* ---------- piede ---------- */
.foot{padding:30px 0 40px;text-align:center}
.foot .links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:0 0 18px;font-size:12px}
.foot .links a{color:var(--teal2);text-decoration:none;text-shadow:1px 1px var(--pink2)}
.foot .links a:hover{color:var(--pink)}
.copyright{margin:0;color:var(--purple2);font-size:10px;letter-spacing:1px}

/* ---------- 404 ---------- */
.lost{min-height:60vh;display:grid;place-items:center;text-align:center}
.lost h2{margin:0;font:bold clamp(70px,16vw,180px)/1 var(--mono);color:transparent;background:url("digital6-mini.jpg") center/360px;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:2px var(--pink)}

/* ---------- telefono ---------- */
@keyframes aura-sm{0%,100%{filter:drop-shadow(4px 4px 0 var(--purple2)) drop-shadow(-2px -2px 0 var(--pink2))}
 50%{filter:drop-shadow(-4px 3px 0 var(--teal2)) drop-shadow(3px -3px 0 var(--pink)) hue-rotate(90deg)}}
@media(max-width:640px){
  .logo,.logo.small{animation-name:aura-sm}.logo span{-webkit-text-stroke:1px var(--void)}
  body{font-size:13px}
  .glyphline{font-size:12px;letter-spacing:10px}
  .nav{gap:8px}.nav a{padding:7px 8px;font-size:11px}
  .gallery,.gallery.two{columns:2 130px;column-gap:22px;margin-top:36px}
  .frame{padding:10px;margin-bottom:34px}
  .frame .scrap{width:34px}
  .frame .sigil{display:none}
  .portal{min-height:200px}
  .tank-ui{bottom:8px;gap:6px;padding:7px}.tank-ui .btn{padding:7px 8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:60s!important;transition:none!important}
}

/* ---------- MIX: tutti i quadri sommati ---------- */
.mix-page .site{pointer-events:none;background:transparent;box-shadow:none}
.mix-page .site a,.mix-page .site button{pointer-events:auto}
.mix-page .psy-bg{display:none}
#mix{position:fixed;top:0;left:var(--wallw,12px);z-index:1;width:calc(100vw - var(--wallw,12px) * 2);height:100vh;cursor:crosshair;touch-action:none}
@media(min-width:1181px){.mix-page{--wallw:max(12px,calc((100vw - 1000px) / 2 - 18px))}}
.mix-page .wall{z-index:2}
.mix-page .top{position:relative;z-index:6}
.mix-page .room-title{margin-top:18px}
.mix-ui{position:fixed;left:50%;bottom:14px;z-index:30;display:flex;flex-direction:column;gap:8px;width:max-content;max-width:calc(100% - 20px);
  padding:10px;transform:translateX(-50%);border:2px solid var(--pink);background:#020304e0;box-shadow:6px 6px var(--teal2)}
.mix-ui .row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mix-ui [aria-pressed=true]{background:var(--pink);outline:2px solid var(--pale)}
#mix-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:760px}
#mix-legend button{padding:3px 6px;color:var(--teal2);border:1px solid var(--purple2);background:var(--void);cursor:pointer;font:11px/1 var(--mono)}
#mix-legend button:hover{color:var(--void);background:var(--teal2)}
.mix-hint{max-width:600px;margin:8px auto 0;padding:5px 8px;text-align:center;font-size:12px;background:#020304cc}
@media(max-width:640px){.mix-ui{bottom:6px;padding:6px;gap:6px}.mix-ui .btn{padding:6px 7px;font-size:10px}#mix-legend{display:none}}
.mix-page .room-title,.mix-page .mix-hint{position:relative;z-index:3}
@media(max-width:640px){.mix-ui{left:6px;right:6px;width:auto;max-width:none;transform:none}.mix-ui .row{gap:5px}}
.mix-page .site{z-index:auto}
.mix-page{-webkit-user-select:none;user-select:none}

/* ---------- TITOLO: più colorato e pazzo ---------- */
.logo{animation:none;filter:none}
.logo span{position:relative;display:inline-block;
  background-size:420px;animation:wob var(--d,1.4s) ease-in-out var(--delay,0s) infinite alternate, texflow 7s linear infinite, huey 5s linear infinite;
  filter:drop-shadow(2px 2px 0 var(--g1,#ff46be)) drop-shadow(2px 2px 0 var(--g2,#00d6c4)) drop-shadow(2px 2px 0 #ffe228) drop-shadow(3px 3px 0 #020304)}
.logo span:after{content:attr(data-c);position:absolute;left:0;top:0;z-index:-1;color:var(--g1,#ff46be);-webkit-text-fill-color:var(--g1,#ff46be);-webkit-text-stroke:0;background:none;
  mix-blend-mode:screen;opacity:.85;animation:glitch 2.3s steps(2,end) var(--delay,0s) infinite;pointer-events:none}
.logo span.boing{animation:boing .55s cubic-bezier(.3,1.8,.5,1) 1, texflow 7s linear infinite, huey 5s linear infinite}
@keyframes wob{0%{transform:translateY(var(--lift,0)) rotate(var(--turn,0)) scale(.95,1.05)}100%{transform:translateY(calc(var(--lift,0) * -1)) rotate(calc(var(--turn,0) * -1)) scale(1.06,.94)}}
@keyframes texflow{to{background-position:calc(var(--x,50%) + 420px) calc(var(--y,50%) + 260px)}}
@keyframes huey{to{filter:drop-shadow(2px 2px 0 var(--g1,#ff46be)) drop-shadow(2px 2px 0 var(--g2,#00d6c4)) drop-shadow(2px 2px 0 #ffe228) drop-shadow(3px 3px 0 #020304) hue-rotate(360deg)}}
@keyframes glitch{0%,70%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0}
  72%{transform:translate(-6px,2px);clip-path:inset(10% 0 55% 0);opacity:.9}
  76%{transform:translate(5px,-3px);clip-path:inset(60% 0 8% 0);opacity:.9}
  80%{transform:translate(-3px,0);clip-path:inset(30% 0 35% 0);opacity:.8}
  84%,100%{transform:translate(0,0);opacity:0}}
@keyframes boing{0%{transform:scale(1)}40%{transform:scale(1.35,.7) rotate(-10deg)}70%{transform:scale(.85,1.25) rotate(8deg)}100%{transform:scale(1)}}
@media(max-width:640px){.logo span{filter:drop-shadow(1px 1px 0 var(--g1,#ff46be)) drop-shadow(1px 1px 0 var(--g2,#00d6c4)) drop-shadow(2px 2px 0 #020304)}}

/* ---------- MIX: pannello colori ---------- */
.mix-ui .colors{align-items:center;padding-top:6px;border-top:1px dashed var(--purple2)}
.mix-ui .colors label{display:flex;align-items:center;gap:5px;color:var(--teal2);font:bold 10px/1 var(--mono)}
.mix-ui .colors input[type=range]{width:90px;accent-color:var(--pink)}
.mix-ui .colors input[type=color]{width:34px;height:22px;padding:0;border:2px solid var(--teal2);background:var(--void)}
.mix-ui .colors select{padding:3px;color:var(--pale);border:2px solid var(--teal2);background:var(--void);font:11px var(--mono)}
.mix-ui [hidden]{display:none}
#mix-legend span{color:var(--pink);font:bold 11px/1.6 var(--mono)}
@media(max-width:640px){.mix-ui .colors input[type=range]{width:64px}.mix-ui{max-height:58vh;overflow:auto}}

/* ---------- guestbook ---------- */
.guestbook iframe{display:block;width:100%;height:640px;border:2px solid var(--teal2);background:var(--pale)}
.gb-wait{padding:18px;color:var(--pale);text-align:center;line-height:1.7}
.gb-wait a,.gb-out a{color:var(--pink)}
.gb-out{margin:8px 0 0;font-size:12px;text-align:right}

/* ---------- pagine di gioco (ACQUARIO, MIX): più spazio ---------- */
.play-page .site{width:min(1400px,calc(100% - 24px));background:transparent;box-shadow:none;padding:0}
.play-page .wall{width:56px}
.play-page.mix-page{--wallw:56px}
@media(max-width:1180px){.play-page .wall{width:10px}.play-page.mix-page{--wallw:10px}}
.play-page .top{padding:6px 0 0}
.play-page .glyphline,.play-page .room-title{display:none}
.play-page .logo.small span{font-size:clamp(24px,3.4vw,44px)}
.play-page .nav{margin:6px 0 0;gap:7px}.play-page .nav a{padding:5px 7px;font-size:10px}
.play-hint{animation:hintfade 9s ease forwards}
@keyframes hintfade{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
.play-ui{display:flex;flex-direction:column;gap:7px}
.tank-ui.play-ui{align-items:stretch}
.tank-ui .row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ui-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.btn.mini{padding:5px 8px;font-size:10px}
.play-ui.collapsed{padding:6px}
.play-ui.collapsed > :not(.ui-bar){display:none!important}
.mix-ui.play-ui.collapsed,.tank-ui.play-ui.collapsed{left:auto;right:14px;transform:none;width:auto}
/* schermo intero: solo il gioco */
.immersive .top,.immersive .wall,.immersive .play-hint,.immersive .foot{display:none!important}
.immersive.mix-page{--wallw:0px}
/* i controlli (cursori, colori, menu) devono essere sempre usabili */
.play-ui,.play-ui *{pointer-events:auto}
.play-ui input,.play-ui select,.play-ui label{-webkit-user-select:auto;user-select:auto;cursor:pointer}
/* ---------- MIX: ritmo / BPM ---------- */
.rhythm input[type=number]{width:58px;padding:3px;color:var(--pale);border:2px solid var(--pink);background:var(--void);font:bold 13px var(--mono)}
.rhythm input[type=checkbox]{accent-color:var(--pink);width:15px;height:15px}
.rhythm .rlab{color:var(--pink);font:bold 10px/1 var(--mono)}
.rhythm .rlab select{margin:0 3px}
.rhythm #speed-val{color:var(--pale);min-width:38px}
.rhythm .keys{flex-basis:100%;margin:2px 0 0;color:var(--purple2);font-size:10px;text-align:center;color:#9a83b0}
#beat-dot{width:16px;height:16px;border-radius:50%;background:var(--purple2);box-shadow:0 0 0 2px var(--void)}
#beat-dot.hit{animation:beatdot .25s ease-out}
@keyframes beatdot{0%{background:var(--lime);box-shadow:0 0 14px 4px var(--lime)}100%{background:var(--purple2)}}
@media(max-width:640px){.rhythm .keys{display:none}}

/* pagine di gioco: titolo animato ma senza filtri pesanti (più fluido) */
.play-page .logo span{animation:wob var(--d,1.4s) ease-in-out var(--delay,0s) infinite alternate;filter:drop-shadow(2px 2px 0 var(--g1,#ff46be)) drop-shadow(2px 2px 0 #020304)}
.play-page .logo span:after{display:none}
.mix-page .wall i{animation-duration:60s}