*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#030109;}
body{font-family:'DM Mono',monospace;cursor:none;user-select:none;color:#EDE8DF;}

/* ─── CURSOR ─── */
#cur{position:fixed;width:5px;height:5px;background:#C8391A;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:screen;}
#cur-r{position:fixed;width:34px;height:34px;border:1px solid rgba(200,57,26,.25);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .2s cubic-bezier(.23,1,.32,1),width .35s,height .35s,border-color .35s,opacity .3s;}
#cur-r.xl{width:56px;height:56px;border-color:rgba(200,57,26,.5);}

/* ─── CANVAS ─── */
#c{position:fixed;inset:0;width:100%;height:100%;z-index:0;}

/* ─── GRAIN ─── */
body::after{content:'';position:fixed;inset:0;z-index:997;pointer-events:none;opacity:.025;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px;}

/* ══════════════════════════
   INTRO
══════════════════════════ */
#intro{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 60%, rgba(12,4,32,.85) 0%, #030109 65%);
  transition:opacity 1.6s cubic-bezier(.23,1,.32,1);
}
#intro.out{opacity:0;pointer-events:none;}

/* SIMBOLO NELL'INTRO */
.intro-symbol{
  width:92px;height:72px;margin-bottom:2.5rem;
  animation:fu .7s .1s both;
}

.i-eyebrow{font-size:1.56rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(237,232,223,.2);margin-bottom:1.8rem;animation:fu .7s .25s both;}

.i-title{
  font-family:'BioRhyme',serif;font-weight:800;
  font-size:clamp(4.5rem,13vw,12rem);
  line-height:.82;letter-spacing:-.06em;text-align:center;
  animation:fu .8s .4s both;
}
.i-title .solid{color:#EDE8DF;}
.i-title .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(237,232,223,.12);
  position:relative;display:inline-block;
}
.i-title .outline::after{
  content:'CHAOS';
  position:absolute;left:0;top:0;
  background:linear-gradient(125deg,#8B5CF6 0%,#C8391A 55%,#F59E0B 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  clip-path:inset(0 100% 0 0);
  animation:wipe 1.4s 1s cubic-bezier(.23,1,.32,1) forwards;
}
@keyframes wipe{to{clip-path:inset(0 0 0 0);}}

.i-divider{
  width:1px;height:50px;margin:2.2rem auto;
  background:linear-gradient(180deg,transparent,rgba(237,232,223,.2),transparent);
  animation:fu .7s .9s both;
}
.i-tagline{font-size:1.44rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(237,232,223,.22);animation:fu .7s 1.1s both;text-align:center;}
.i-hint{margin-top:2.5rem;font-size:1.28rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,232,223,.1);animation:pulse 2.5s 2s infinite both;}

@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.08}50%{opacity:.35}}

/* ── INTRO SHOWCASE (floating texts + fireworks) ── */
#intro-showcase{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
#intro-fw{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.intro-float-text{
  position:absolute;white-space:nowrap;pointer-events:none;
  will-change:transform,opacity;
}
@keyframes showcase-fadeUp{
  from{opacity:0;transform:translateY(60px) scale(.7)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes showcase-fadeDown{
  from{opacity:0;transform:translateY(-60px) scale(.7)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes showcase-zoomIn{
  from{opacity:0;transform:perspective(600px) translateZ(-200px) scale(.2)}
  to{opacity:1;transform:perspective(600px) translateZ(0) scale(1)}
}
@keyframes showcase-slideLeft{
  from{opacity:0;transform:perspective(500px) translateX(80px) rotateY(-15deg)}
  to{opacity:1;transform:perspective(500px) translateX(0) rotateY(0)}
}
@keyframes showcase-slideRight{
  from{opacity:0;transform:perspective(500px) translateX(-80px) rotateY(15deg)}
  to{opacity:1;transform:perspective(500px) translateX(0) rotateY(0)}
}
@keyframes showcase-rotateIn{
  from{opacity:0;transform:perspective(400px) rotate(-12deg) rotateX(20deg) scale(.6)}
  to{opacity:1;transform:perspective(400px) rotate(0) rotateX(0) scale(1)}
}
@keyframes showcase-flip3d{
  from{opacity:0;transform:perspective(600px) rotateY(-90deg) scale(.7)}
  to{opacity:1;transform:perspective(600px) rotateY(0) scale(1)}
}
@keyframes showcase-swing3d{
  0%{opacity:0;transform:perspective(500px) rotateX(60deg) translateY(40px)}
  60%{transform:perspective(500px) rotateX(-8deg) translateY(-5px)}
  100%{opacity:1;transform:perspective(500px) rotateX(0) translateY(0)}
}
@keyframes showcase-explode{
  0%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.3)}
  100%{opacity:0;transform:scale(0.1)}
}

/* ══════════════════════════
   UI LAYER
══════════════════════════ */
#ui{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity 1.1s .2s;}
#ui.on{opacity:1;pointer-events:all;}

/* ─── TOPBAR ─── */
#tb{
  position:absolute;top:0;left:0;right:0;height:88px;
  z-index:240;
  display:flex;align-items:center;padding:0 2rem;gap:clamp(.7rem,1.2vw,1.8rem);
  background:linear-gradient(180deg,rgba(3,1,9,.92) 60%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(237,232,223,.04);
  min-width:0;
  overflow:visible;
}

/* Logo con simbolo */
.tb-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.tb-logo-icon{width:52px;height:52px;flex-shrink:0;}
.tb-logo-text{font-family:'BioRhyme',serif;font-weight:800;font-size:2.2rem;letter-spacing:-.02em;color:#EDE8DF;line-height:1;}
.tb-logo-text b{background:linear-gradient(90deg,#8B5CF6,#C8391A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tb-logo-stack{display:flex;flex-direction:column;gap:.15rem;}
.tb-version{font-family:'BioRhyme',serif;font-weight:400;font-size:1rem;letter-spacing:.12em;color:rgba(237,232,223,.2);line-height:1;}

.tb-sep{width:1px;height:20px;background:rgba(237,232,223,.07);flex-shrink:0;}

.tb-github{
  position:relative;
  display:flex;align-items:center;gap:.5rem;
  min-height:32px;padding:.35rem .72rem;
  color:#EDE8DF;text-decoration:none;
  background:linear-gradient(135deg,rgba(255,176,0,.16),rgba(255,102,0,.1));
  border:1px solid rgba(255,176,0,.3);
  border-radius:999px;
  box-shadow:0 0 18px rgba(255,176,0,.1), inset 0 0 0 1px rgba(237,232,223,.04);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s;
}
.tb-github:hover{
  color:#fff;
  background:linear-gradient(135deg,rgba(255,176,0,.24),rgba(255,102,0,.16));
  border-color:rgba(255,176,0,.62);
  box-shadow:0 0 24px rgba(255,176,0,.2),0 0 16px rgba(255,102,0,.12),inset 0 0 0 1px rgba(237,232,223,.08);
  transform:translateY(-1px);
}
.tb-github::before,
.tb-github::after{
  position:absolute;
  left:50%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
  z-index:241;
}
.tb-github::before{
  content:"";
  top:calc(100% + 6px);
  width:10px;
  height:10px;
  background:#050505;
  border-left:1px solid rgba(255,176,0,.38);
  border-top:1px solid rgba(255,176,0,.38);
  transform:translate(-50%,-4px) rotate(45deg);
}
.tb-github::after{
  content:"";
  top:calc(100% + 11px);
  transform:translate(-50%,-4px);
}
.tb-gigalabor-tip{
  position:absolute;
  left:50%;
  top:calc(100% + 11px);
  width:min(34rem,calc(100vw - 2.4rem));
  padding:.95rem 1rem 1rem;
  display:grid;
  gap:.28rem;
  color:#fff;
  background:
    linear-gradient(160deg,rgba(255,176,0,.16),rgba(255,102,0,.08) 38%,rgba(5,5,5,.98) 68%),
    #050505;
  border:1px solid rgba(255,176,0,.38);
  border-radius:8px;
  box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 24px rgba(255,176,0,.16),inset 0 0 0 1px rgba(255,176,0,.08);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-4px);
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease;
  z-index:242;
  text-align:left;
  white-space:normal;
}
.tb-gigalabor-kicker{
  color:#ffb000;
  font-family:'JetBrains Mono',monospace;
  font-size:.86rem;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.tb-gigalabor-title{
  color:#fff;
  font-family:'BioRhyme',serif;
  font-size:1.32rem;
  line-height:1.18;
  letter-spacing:0;
  font-weight:800;
}
.tb-gigalabor-body{
  color:#c0aa80;
  font-size:1.08rem;
  line-height:1.36;
  letter-spacing:0;
  text-transform:none;
}
.tb-gigalabor-note{
  margin-top:.22rem;
  padding-top:.42rem;
  color:rgba(255,176,0,.72);
  border-top:1px solid rgba(255,176,0,.16);
  font-family:'JetBrains Mono',monospace;
  font-size:.96rem;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
}
.tb-github:hover::before,
.tb-github:hover::after,
.tb-github:focus-visible::before,
.tb-github:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) rotate(45deg);
}
.tb-github:hover::after,
.tb-github:focus-visible::after{
  transform:translate(-50%,0);
}
.tb-github:hover .tb-gigalabor-tip,
.tb-github:focus-visible .tb-gigalabor-tip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.tb-github-icon{width:16px;height:16px;flex-shrink:0;}
.tb-github-label{font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}

.tb-concorso{font-size:1.36rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(237,232,223,.3);}
.tb-r{margin-left:auto;display:flex;gap:clamp(.6rem,1vw,1.4rem);align-items:center;min-width:0;flex-shrink:1;}
.tb-jk{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.06rem;
  min-width:0;max-width:clamp(7.8rem,12vw,12.4rem);
  color:#F59E0B;font-weight:500;text-align:right;line-height:1;
  overflow:hidden;
}
.tb-jk-label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,158,11,.72);line-height:1;}
.tb-jk-value{display:block;max-width:100%;font-size:clamp(1rem,1.18vw,1.46rem);letter-spacing:.04em;color:#F59E0B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;line-height:1.08;}
.tb-cd-wrap{display:flex;flex-direction:column;align-items:center;gap:.08rem;line-height:1;}
.tb-cd-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,232,223,.36);font-weight:500;}
.tb-cd{font-size:1.44rem;letter-spacing:.08em;color:rgba(237,232,223,.7);font-weight:500;font-variant-numeric:tabular-nums;}
@keyframes cc-waiting-pulse{0%,100%{opacity:.9}50%{opacity:.35}}

/* ─── BOTTOMBAR ─── */
#bb{
  position:absolute;bottom:0;left:0;right:0;height:62px;
  display:grid;grid-template-columns:1fr;align-items:center;padding:0 2rem;
  background:linear-gradient(0deg,rgba(3,1,9,.9) 60%,transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(237,232,223,.04);
  font-size:1.44rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,232,223,.22);
}
#bb > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#bb > span:not(#bb-msg){display:none;}
#bb-msg{color:rgba(237,232,223,.35);text-align:center;}
.bb-sep{display:none;}
.bb-r{display:none;}

/* ─── SIDENAV ─── */
#side{
  position:absolute;left:0;top:88px;bottom:62px;width:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  border-right:1px solid rgba(237,232,223,.04);
  background:rgba(3,1,9,.35);backdrop-filter:blur(12px);
  z-index:32;
}

.si{
  position:relative;
  width:40px;height:62px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s;
  color:rgba(237,232,223,.22);
  border:1px solid transparent;
}
.si:hover,.si.on{color:rgba(237,232,223,.85);border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.07);}
.si.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#8B5CF6,#C8391A);}

/* Icone SVG nei bottoni nav */
.si svg{width:46px;height:46px;}

.si-tooltip{
  position:absolute;left:calc(100% + 10px);
  background:rgba(3,1,9,.95);border:1px solid rgba(237,232,223,.08);
  padding:.35rem .7rem;
  font-size:1.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(237,232,223,.6);white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .2s;
  backdrop-filter:blur(12px);
  z-index:33;
}
.si:hover .si-tooltip{opacity:1;}

/* ─── DETAIL PANEL ─── */
#panel{
  position:absolute;left:92px;top:88px;bottom:62px;width:460px;
  background:rgba(5,2,18,.95);
  border-right:1px solid rgba(237,232,223,.06);
  backdrop-filter:blur(28px);
  /* -100% = larghezza panel, -93px = offset left sidenav → bordo destro a -1px */
  transform:translateX(calc(-100% - 93px));
  transition:transform .55s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;
  z-index:30;
}
#panel.open{transform:translateX(0);}

/* Header panel */
.p-head{
  padding:2.5rem 2.5rem 2rem;
  border-bottom:1px solid rgba(237,232,223,.06);
  flex-shrink:0;
  position:relative;
}
.p-head::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,#8B5CF6 30%,#C8391A);
  opacity:.5;
}
.p-symbol{position:absolute;top:1.5rem;right:3rem;opacity:.08;width:36px;height:36px;}
.p-close{
  position:absolute;top:1.4rem;right:1.4rem;
  width:46px;height:46px;border:1px solid rgba(237,232,223,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(237,232,223,.35);font-size:1.8rem;
  transition:all .2s;
}
.p-close:hover{border-color:rgba(200,57,26,.5);color:#C8391A;background:rgba(200,57,26,.06);}

.p-kicker{
  font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;
  display:block;margin-bottom:.7rem;
  background:linear-gradient(90deg,#8B5CF6,#C8391A);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.p-title{font-family:'BioRhyme',serif;font-weight:800;font-size:2.5rem;letter-spacing:-.04em;line-height:.9;color:#EDE8DF;}
.p-subtitle{font-size:1.44rem;letter-spacing:.1em;color:rgba(237,232,223,.3);margin-top:.6rem;display:block;}

/* Body panel — più respiro */
.p-body{
  flex:1;overflow-y:auto;
  padding:2rem 2.5rem;
  scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.2) transparent;
}
.p-body::-webkit-scrollbar{width:2px;}
.p-body::-webkit-scrollbar-track{background:transparent;}
.p-body::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);}

/* Sezione label */
.p-sec{
  font-size:1.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(237,232,223,.2);
  display:flex;align-items:center;gap:.8rem;
  margin:1.6rem 0 .8rem;
}
.p-sec::after{content:'';flex:1;height:1px;background:rgba(237,232,223,.06);}
.p-sec:first-child{margin-top:0;}

/* Balls */
.ball-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.5rem;}
.pball{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'BioRhyme',serif;font-size:2.3rem;font-weight:700;
  border:1px solid rgba(237,232,223,.12);color:#EDE8DF;
  transition:all .3s;background:rgba(237,232,223,.03);
}
.pball.hot{border-color:rgba(200,57,26,.6);color:#C8391A;background:rgba(200,57,26,.07);box-shadow:0 0 14px rgba(200,57,26,.12);}
.pball.cold{border-color:rgba(139,92,246,.5);color:#8B5CF6;background:rgba(139,92,246,.07);}
.pball.jolly{border-color:rgba(245,158,11,.4);color:#F59E0B;border-style:dashed;background:rgba(245,158,11,.04);}

/* Stat rows — più respiro */
.sr{
  display:flex;justify-content:space-between;align-items:center;
  padding:.65rem 0;border-bottom:1px solid rgba(237,232,223,.05);
  font-size:1.64rem;gap:1rem;
}
.sr-k{color:rgba(237,232,223,.4);letter-spacing:.04em;flex:1;}
.sr-v{color:rgba(237,232,223,.85);font-weight:500;text-align:right;flex-shrink:0;}
.sr-v.r{color:#C8391A;} .sr-v.g{color:#F59E0B;} .sr-v.v{color:#8B5CF6;}

/* Algo rows */
.ar{
  padding:.9rem 0;border-bottom:1px solid rgba(237,232,223,.05);
  cursor:pointer;transition:padding-left .25s;
}
.ar:hover{padding-left:.4rem;}
.ar-top{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.45rem;}
.ar-rk{font-size:.9rem;color:rgba(237,232,223,.22);min-width:18px;letter-spacing:.1em;}
.ar-nm{font-size:1.68rem;color:rgba(237,232,223,.55);flex:1;letter-spacing:.02em;}
.ar-sc{font-family:'BioRhyme',serif;font-size:2.5rem;font-weight:700;color:rgba(237,232,223,.7);}
.ar-sc.top{color:#F59E0B;}
.ar-trend{font-size:.88rem;color:rgba(237,232,223,.25);margin-left:.2rem;}
.ar-bar{height:1px;background:rgba(237,232,223,.06);position:relative;overflow:hidden;}
.ar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,rgba(139,92,246,.6),rgba(200,57,26,.6));transition:width 1.4s cubic-bezier(.23,1,.32,1);}

/* Sestine */
.sc{
  border:1px solid rgba(237,232,223,.06);padding:1.1rem;
  margin-bottom:.6rem;cursor:pointer;
  transition:border-color .25s,background .25s;
  position:relative;overflow:hidden;
}
.sc::before{content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:linear-gradient(180deg,#8B5CF6,#C8391A);transform:scaleY(0);transition:transform .3s cubic-bezier(.23,1,.32,1);}
.sc:hover{border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.04);}
.sc:hover::before{transform:scaleY(1);}
.sc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;}
.sc-algo{font-size:1.28rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,232,223,.3);}
.sc-conf{font-size:1.28rem;color:rgba(139,92,246,.7);}
.sc-nums{display:flex;gap:.35rem;}
.scn{
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(237,232,223,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.44rem;color:rgba(237,232,223,.5);
  transition:all .25s;
}
.sc:hover .scn{border-color:rgba(139,92,246,.4);color:#8B5CF6;}

/* Lab features */
.lf{
  padding:.9rem 0;border-bottom:1px solid rgba(237,232,223,.05);
  cursor:pointer;transition:padding-left .25s;
  display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
}
.lf:hover{padding-left:.4rem;}
.lf-n{font-size:1.72rem;letter-spacing:.15em;color:rgba(245,158,11,.6);font-variant-numeric:tabular-nums;}
.lf-t{font-size:1.72rem;color:rgba(237,232,223,.7);}
.lf-a{font-size:1.72rem;color:rgba(237,232,223,.2);transition:color .2s;}
.lf:hover .lf-a{color:rgba(139,92,246,.7);}

/* ══════════════════════════
   ORACLE OVERLAY
══════════════════════════ */
#ov{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,1,9,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  opacity:0;pointer-events:none;
  transition:opacity .7s cubic-bezier(.23,1,.32,1);
  backdrop-filter:blur(24px);
}
#ov.on{opacity:1;pointer-events:all;}

.ov-top{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#8B5CF6 30%,#C8391A 70%,transparent);}
.ov-close{
  position:absolute;top:1.8rem;right:1.8rem;
  font-size:1.28rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,232,223,.25);cursor:pointer;
  border:1px solid rgba(237,232,223,.08);padding:.5rem 1.1rem;
  transition:all .2s;
}
.ov-close:hover{color:#EDE8DF;border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.06);}

/* SIMBOLO GRANDE in oracle */
.ov-symbol{width:90px;height:90px;opacity:.15;}

.ov-title{
  font-family:'BioRhyme',serif;font-weight:800;
  font-size:clamp(3rem,9vw,8rem);
  letter-spacing:-.05em;line-height:.82;text-align:center;
}
.ov-title .g{color:transparent;-webkit-text-stroke:1px rgba(237,232,223,.08);}
.ov-title .r{background:linear-gradient(125deg,#8B5CF6,#C8391A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Orrery */
.ov-rings{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;}
.or{position:absolute;border-radius:50%;border:1px solid;}
.o1{width:100%;height:100%;border-color:rgba(139,92,246,.1);animation:sp 22s linear infinite;}
.o2{width:64%;height:64%;border-color:rgba(200,57,26,.18);animation:sp 14s linear infinite reverse;}
.o3{width:34%;height:34%;border-color:rgba(245,158,11,.22);animation:sp 8s linear infinite;}
@keyframes sp{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.o1::before,.o2::before,.o3::before{content:'';position:absolute;border-radius:50%;width:7px;height:7px;top:-3.5px;left:50%;transform:translateX(-50%);}
.o1::before{background:rgba(139,92,246,.5);box-shadow:0 0 8px rgba(139,92,246,.6);}
.o2::before{background:#C8391A;top:auto;bottom:-3.5px;left:18%;box-shadow:0 0 10px #C8391A;}
.o3::before{background:#F59E0B;left:auto;right:-3.5px;top:28%;box-shadow:0 0 8px #F59E0B;}
.o-core{position:absolute;width:58px;height:58px;border-radius:50%;border:1px solid rgba(237,232,223,.08);display:flex;align-items:center;justify-content:center;font-size:.85rem;letter-spacing:.12em;color:rgba(237,232,223,.2);text-transform:uppercase;animation:gl 4s ease-in-out infinite;}
@keyframes gl{0%,100%{box-shadow:0 0 12px rgba(139,92,246,.12)}50%{box-shadow:0 0 32px rgba(139,92,246,.35)}}

.ov-metrics{display:flex;gap:2.5rem;}
.om{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.om-v{font-family:'BioRhyme',serif;font-size:3rem;font-weight:800;line-height:1;}
.om-l{font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,232,223,.25);}

.ov-disclaimer{font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,232,223,.15);text-align:center;max-width:460px;line-height:2;}

/* ══════════════════════════
   TOOLTIP
══════════════════════════ */
#tt{
  display:none;
  position:fixed;pointer-events:none;z-index:30;
  right:auto;
  bottom:auto;
  box-sizing:border-box;
  width:clamp(220px, 24vw, 360px);
  max-width:min(360px, calc(100vw - var(--ad-reserve-right, 0px) - 16px));
  background:rgba(5,2,18,.97);
  border:1px solid rgba(139,92,246,.2);
  padding:clamp(.75rem, 1.1vw, 1rem) clamp(.85rem, 1.35vw, 1.2rem);
  white-space:normal;
  opacity:0;transition:opacity .15s;
  backdrop-filter:blur(20px);
  border-radius:10px;
  overflow-wrap:anywhere;
}
#tt::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#8B5CF6,#C8391A);}
#tt.on{opacity:1;}
.tt-badge{font-size:clamp(.68rem, .78vw, .9rem);letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(90deg,#8B5CF6,#C8391A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:.4rem;}
.tt-num{font-family:'BioRhyme',serif;font-size:clamp(1.45rem, 2vw, 2rem);font-weight:800;color:#EDE8DF;line-height:1;margin-bottom:.35rem;}
.tt-info{font-size:clamp(.82rem, .98vw, 1rem);color:rgba(237,232,223,.62);line-height:1.55;}
.tt-info b{color:rgba(237,232,223,.7);}


/* ─── V8 ADS SAFE AREA ─── */
/* Disattiva il grain globale sul body e lo riapplica solo nell'area utile v8 */
body::after { display: none; }
#v8-root::after{
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:var(--ad-reserve-right, 0px);
  bottom:var(--ad-reserve-bottom, 0px);
  z-index:997;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
}

/* Tutti i layer fixed v8 rispettano la riserva ads (destra desktop, basso mobile) */
#c,
#ui,
#intro,
#ov,
#cur,
#cur-r {
  right: var(--ad-reserve-right, 0px);
  bottom: var(--ad-reserve-bottom, 0px);
}

/* ══════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
══════════════════════════════ */
@media(max-width:1024px){
  #panel{width:320px;}
  .tb-logo-text{font-size:1.8rem;}
  .tb-jk{max-width:9.2rem;}
  .tb-jk-value{font-size:1.16rem;}
  .tb-github-label{display:none;}
  /* Progressive jackpot: "Euro" → "€" */
  .jk-euro{display:none;}
  .jk-sym{display:inline;}
}
/* ─── PROGRESSIVE: hide canvas (≤860px) ─── */
@media(max-width:860px){
  #tb{height:72px;padding:0 1rem;gap:1rem;}
  #tb .tb-logo canvas,#cc-logo{display:none;}
  #v8-alg-count{display:none!important;}
  .tb-r .tb-sep:last-of-type{display:none;}
  .tb-r{gap:.8rem;}
}
/* ─── PROGRESSIVE: hide timer (≤700px) ─── */
@media(max-width:700px){
  .tb-cd-wrap{display:none!important;}
}
/* ─── PROGRESSIVE: compact logo (≤520px) ─── */
@media(max-width:520px){
  #tb{height:60px;padding:0 .75rem;gap:.6rem;}
  .tb-version,#tb-version{display:none!important;}
  .tb-logo-text{font-size:1.3rem!important;line-height:1.1;}
  .tb-logo-text b{display:block;}
  .tb-sep{display:none;}
  .tb-github-icon{width:14px;height:14px;}
  .tb-github{padding:.25rem .5rem!important;}
  .tb-jk{max-width:none;}
  .tb-jk-label{display:none;}
  .tb-jk-value{font-size:.92rem;}
  .jk-sym{display:none;}
}

/* ══════════════════════════════
   RESPONSIVE — MOBILE (≤640px)
══════════════════════════════ */
@media(max-width:640px){
  /* Cursore personalizzato disattivato su touch */
  body{cursor:auto;}
  #cur,#cur-r{display:none;}

  /* Topbar: regole progressive già definite sopra (860/700/520px) */
  .tb-concorso{display:none;}

  /* Sidenav → tab bar orizzontale in basso */
  #side{
    top:auto;
    left:0;right:var(--ad-reserve-right,0px);
    bottom:var(--ad-reserve-bottom,0px);
    width:auto;height:56px;
    flex-direction:row;justify-content:space-around;
    border-right:none;
    border-top:1px solid rgba(237,232,223,.06);
  }
  .si{width:auto;height:100%;flex:1;border:none;border-radius:0;}
  .si.on::before{top:0;bottom:auto;left:0;right:0;width:100%;height:2px;}
  .si-tooltip{display:none;}
  .si svg{width:36px;height:36px;}

  /* Bottombar nascosta (sostituita dalla sidenav in basso) */
  #bb{display:none;}
  #tt{
    width:clamp(200px, 72vw, 320px);
    max-width:calc(100vw - 16px);
  }

  /* Panel full-width */
  #panel{
    width:100%;left:0;right:0;
    top:72px;bottom:56px;
    transform:translateY(110%);
  }
  #panel.open{transform:translateY(0);}

  /* Aggiusta il top degli elementi ancorati alla topbar */
  #side{top:auto;}

  /* Intro adattata */
  .i-eyebrow{font-size:1.1rem;letter-spacing:.2em;}
  .i-tagline{font-size:1rem;letter-spacing:.12em;padding:0 1.5rem;}
  .i-hint{font-size:1rem;}

  /* Oracle overlay: stack verticale su schermi stretti */
  .ov-metrics{flex-wrap:wrap;gap:1.2rem;justify-content:center;padding:0 1rem;}
  .ov-rings{width:160px;height:160px;}
  .o1{} .o2{} .o3{}
  .ov-disclaimer{font-size:.8rem;padding:0 1.5rem;}
}

/* ══════════════════════════════════════════════════════════════
   PANEL RESPONSIVE — fluid sizing bilanciato per tutti i layout
   Principio: i font dei panel scalano con la larghezza disponibile
   in modo che il contenuto resti leggibile senza overflow.
══════════════════════════════════════════════════════════════ */

/* ── Variabili panel adattive (default: desktop largo) ─────── */
#panel {
  --pf-title:  2.5rem;
  --pf-sub:    1.44rem;
  --pf-sec:    .8rem;
  --pf-body:   1.64rem;
  --pf-nm:     1.68rem;
  --pf-sc:     2.5rem;
  --pf-lf:     1.72rem;
  --pball-sz:  68px;
  --pball-fs:  2.1rem;
  --pad-h:     2.5rem;
}

/* ── 641–1024 px: panel 320 px, testo più compatto ─────────── */
@media (max-width:1024px) and (min-width:641px) {
  #panel {
    --pf-title:  1.9rem;
    --pf-sub:    1.2rem;
    --pf-sec:    .75rem;
    --pf-body:   1.44rem;
    --pf-nm:     1.4rem;
    --pf-sc:     1.8rem;
    --pf-lf:     1.44rem;
    --pball-sz:  54px;
    --pball-fs:  1.72rem;
    --pad-h:     1.8rem;
  }
  .p-head { padding: 1.8rem var(--pad-h) 1.5rem; }
  .p-body { padding: 1.5rem var(--pad-h); }
}

/* ── ≤640 px: panel full-width, testo fluido ───────────────── */
@media (max-width:640px) {
  #panel {
    --pf-title:  clamp(1.5rem, 6vw, 2.1rem);
    --pf-sub:    clamp(1rem, 3vw, 1.28rem);
    --pf-sec:    .7rem;
    --pf-body:   clamp(1.2rem, 3.5vw, 1.5rem);
    --pf-nm:     clamp(1.1rem, 3.2vw, 1.4rem);
    --pf-sc:     clamp(1.4rem, 4vw, 1.9rem);
    --pf-lf:     clamp(1.2rem, 3.5vw, 1.5rem);
    --pball-sz:  clamp(40px, 11vw, 56px);
    --pball-fs:  clamp(1.2rem, 3.5vw, 1.8rem);
    --pad-h:     1.4rem;
  }
  .p-head { padding: 1.4rem var(--pad-h) 1.2rem; }
  .p-body { padding: 1.2rem var(--pad-h); }
  .p-close { width:38px; height:38px; font-size:1.4rem; top:1rem; right:1rem; }
}

/* ── Applica le variabili agli elementi panel ──────────────── */
.p-title      { font-size: var(--pf-title); }
.p-subtitle   { font-size: var(--pf-sub); }

.p-sec {
  font-size: var(--pf-sec);
  letter-spacing: .22em;
}

.sr { font-size: var(--pf-body); }

/* Balls estrazione: fluid */
.pball {
  width:  var(--pball-sz);
  height: var(--pball-sz);
  font-size: var(--pball-fs);
}

/* Algoritmi: evita overflow del score su panel stretto */
.ar-nm  { font-size: var(--pf-nm);  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-sc  { font-size: var(--pf-sc); }
.ar-top { flex-wrap: nowrap; overflow: hidden; }

/* Sestine / lab features */
.lf     { font-size: var(--pf-lf); }
.lf-n   { font-size: var(--pf-lf); }
.lf-t   { font-size: var(--pf-lf); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lf-a   { font-size: var(--pf-lf); flex-shrink:0; }

/* Ball-row: usa gap fluido */
.ball-row {
  gap: clamp(.3rem, 1.5vw, .55rem);
}

/* Nasconde il watermark canvas quando il panel è stretto (< 641px) */
@media (max-width:640px) {
  #panel canvas { display: none; }
}

/* Panel head: previene overflow del titolo su qualsiasi width */
.p-title, .p-subtitle {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Scroll-bar sottile su tutti i breakpoint */
.p-body { scrollbar-width: thin; }

/* ── Fluid sc-nums ball size ────────────────────────────────── */
.scn {
  width:  clamp(36px, 8vw, 52px);
  height: clamp(36px, 8vw, 52px);
  font-size: clamp(1rem, 2.8vw, 1.44rem);
}

/* Panel: larghezza massima su schermi ultra-wide (evita panel troppo largo) */
@media (min-width: 1600px) {
  #panel { width: 520px; }
}

/* Scroll-snap nel p-body per algoritmi e sestine (migliora UX mobile) */
@media (max-width: 640px) {
  .sc { border-radius: .5rem; }
  .ar { padding: .7rem 0; }
}

/* ════════════════════════════════════════════════════════════════
   V8+ ENHANCEMENTS — aurora, jackpot glow, ticker segnali
   ════════════════════════════════════════════════════════════════ */

/* ── AURORA dietro al canvas ──
   Il contenitore rispetta la riserva ads (destra desktop, basso mobile)
   e clippa i blob oversized con overflow:hidden. */
#v8-aurora{position:fixed;inset:0;right:var(--ad-reserve-right,0px);bottom:var(--ad-reserve-bottom,0px);
  z-index:0;overflow:hidden;pointer-events:none;}
#v8-aurora i{position:absolute;border-radius:50%;display:block;filter:blur(90px);opacity:.55;}
#v8-aurora .au1{width:55vw;height:55vw;left:-14vw;top:-18vw;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 65%);animation:v8au1 28s ease-in-out infinite alternate;}
#v8-aurora .au2{width:48vw;height:48vw;right:-16vw;bottom:-18vw;background:radial-gradient(circle,rgba(200,57,26,.14),transparent 65%);animation:v8au2 33s ease-in-out infinite alternate;}
#v8-aurora .au3{width:34vw;height:34vw;left:38vw;top:42vh;background:radial-gradient(circle,rgba(110,231,255,.07),transparent 65%);animation:v8au1 24s 4s ease-in-out infinite alternate-reverse;}
@keyframes v8au1{to{transform:translate(8vw,6vh) scale(1.15);}}
@keyframes v8au2{to{transform:translate(-7vw,-5vh) scale(1.1);}}
@media (prefers-reduced-motion:reduce){#v8-aurora i{animation:none;}}
#c{z-index:1;}

/* ── JACKPOT glow ── */
.tb-jk{text-shadow:0 0 22px rgba(245,158,11,.45);font-variant-numeric:tabular-nums;}

/* ── COUNTDOWN: secondi accesi ── */
.tb-cd b.v8s{color:#C8391A;text-shadow:0 0 14px rgba(200,57,26,.6);font-weight:500;}

/* ── TICKER nel bottombar ── */
#bb-msg.v8tk{overflow:hidden;position:relative;text-align:left;}
#bb-msg.v8tk .v8tk-in{
  display:inline-flex;gap:3.2rem;white-space:nowrap;will-change:transform;
  animation:v8tk 46s linear infinite;padding-left:100%;
}
#bb-msg.v8tk:hover .v8tk-in{animation-play-state:paused;}
#bb-msg.v8tk .v8tk-in span{color:rgba(237,232,223,.35);}
#bb-msg.v8tk .v8tk-in b{font-weight:500;color:rgba(237,232,223,.7);}
#bb-msg.v8tk .v8tk-in .r{color:#C8391A;}
#bb-msg.v8tk .v8tk-in .v{color:#8B5CF6;}
#bb-msg.v8tk .v8tk-in .o{color:#F59E0B;}
#bb-msg.v8tk .v8tk-in .cy{color:#6EE7FF;}
#bb-msg.v8tk .v8tk-in .sep{color:rgba(200,57,26,.5);}
@keyframes v8tk{to{transform:translateX(-100%);}}
@media (prefers-reduced-motion:reduce){#bb-msg.v8tk .v8tk-in{animation:v8tk 120s linear infinite;padding-left:100%;}}

/* ── COUNTDOWN A SEGMENTI (v8plus-home) ── */
.tb-cd-wrap.v8cd-on .tb-cd{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tb-cd-wrap.v8cd-on .tb-cd-label{display:none;}
#v8cd{display:none;gap:.4rem;align-items:center;}
.tb-cd-wrap.v8cd-on{flex-direction:row;}
.tb-cd-wrap.v8cd-on #v8cd{display:flex;}
.v8cd-seg{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  background:rgba(237,232,223,.05);border:1px solid rgba(237,232,223,.08);
  border-radius:6px;padding:.28rem .5rem;min-width:42px;
}
.v8cd-seg b{font-size:1.3rem;font-weight:500;color:#EDE8DF;font-variant-numeric:tabular-nums;line-height:1;}
.v8cd-seg i{font-style:normal;font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(237,232,223,.28);}
.v8cd-seg.hot b{color:#C8391A;text-shadow:0 0 14px rgba(200,57,26,.6);}

/* ── JACKPOT PULSE ── */
@keyframes v8jk{0%{transform:scale(1);text-shadow:0 0 22px rgba(245,158,11,.45);}30%{transform:scale(1.12);text-shadow:0 0 36px rgba(245,158,11,.85);}100%{transform:scale(1);text-shadow:0 0 22px rgba(245,158,11,.45);}}
.tb-jk.v8jk-pulse{display:inline-block;animation:v8jk .9s cubic-bezier(.23,1,.32,1);}

/* ── CHIP STATISTICHE FLOTTANTI ── */
#v8chips{position:fixed;inset:0;right:var(--ad-reserve-right,0px);bottom:var(--ad-reserve-bottom,0px);z-index:5;pointer-events:none;}
#v8chips.hide .v8chip{opacity:0;}
.v8chip{
  position:absolute;display:flex;flex-direction:column;gap:.3rem;
  padding:.85rem 1.05rem;border-radius:12px;min-width:150px;max-width:220px;
  background:rgba(8,4,18,.55);border:1px solid rgba(237,232,223,.08);
  backdrop-filter:blur(10px);
  transition:opacity .5s, border-color .3s;
  will-change:transform;
}
.v8chip .ck{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(237,232,223,.32);}
.v8chip .cv{font-family:'BioRhyme',serif;font-weight:700;font-size:1.7rem;line-height:1;}
.v8chip .cs{font-size:.66rem;color:rgba(237,232,223,.32);letter-spacing:.04em;}
.v8chip.violet .cv{color:#8B5CF6;}
.v8chip.amber .cv{color:#F59E0B;}
.v8chip.red .cv{color:#C8391A;}
.v8chip.cyan .cv{color:#6EE7FF;}
.v8chip.p1{left:110px;top:120px;animation:v8float 7s ease-in-out infinite;}
.v8chip.p2{right:46px;top:130px;animation:v8float 8s 1s ease-in-out infinite;}
.v8chip.p3{left:120px;bottom:116px;animation:v8float 9s 2s ease-in-out infinite;}
.v8chip.p4{right:54px;bottom:112px;animation:v8float 7.5s .5s ease-in-out infinite;}
@keyframes v8float{0%,100%{margin-top:0}50%{margin-top:-12px}}
@media (max-width:1180px){#v8chips{display:none;}}
@media (prefers-reduced-motion:reduce){.v8chip{animation:none!important;}}

/* ── HERO MOCKUP V8+ (intro persistente) ── */
#ihero{position:absolute;inset:0;width:100%;height:100%;z-index:-1;}
.lf-sub{font-size:1.2rem;color:rgba(237,232,223,.3);display:block;letter-spacing:.06em;}
.i-cta{
  margin-top:2.6rem;
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.95rem 2.1rem;border-radius:999px;
  font-size:1.18rem;letter-spacing:.28em;text-transform:uppercase;color:#EDE8DF;
  border:1px solid rgba(237,232,223,.16);background:rgba(8,4,18,.5);
  backdrop-filter:blur(8px);cursor:pointer;
  transition:border-color .3s,box-shadow .3s,transform .3s;
  animation:fu .8s 1.4s both;
}
.i-cta:hover{border-color:rgba(200,57,26,.6);box-shadow:0 0 34px rgba(200,57,26,.25);transform:translateY(-2px);}
.i-cta-dot{width:8px;height:8px;border-radius:50%;background:#C8391A;box-shadow:0 0 12px #C8391A;animation:pulse 2s 2s infinite both;}

.i-note{
  margin-top:1.4rem;font-size:.96rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,232,223,.14);animation:fu .8s 1.7s both;
}
@media (max-width:640px){
  .i-cta{font-size:1rem;padding:.8rem 1.5rem;letter-spacing:.2em;}
}

/* -- CHIP visibili anche in hero (montate su #v8-root) -- */
#v8chips{z-index:65;}

/* Nasconde i pannelli laterali aboliti: la home usa solo la dashboard. */
#panel,
#side{display:none!important;}

/* ======================================================
   DASHBOARD LANDING  --  #v8-dashboard
   Full-screen grid di card aperte, stile v8+ glassmorphism.
====================================================== */
#v8-dashboard{
  position:absolute;
  left:0;top:88px;bottom:62px;right:0;
  z-index:30;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2rem 2.5rem;
  scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.2) transparent;
  background:
    radial-gradient(720px 420px at 15% 0%,rgba(139,92,246,.10),transparent 68%),
    radial-gradient(620px 360px at 88% 18%,rgba(200,57,26,.08),transparent 70%),
    linear-gradient(180deg,rgba(5,2,18,.28),rgba(3,1,9,.38));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1);
}
#v8-dashboard::-webkit-scrollbar{width:2px;}
#v8-dashboard::-webkit-scrollbar-track{background:transparent;}
#v8-dashboard::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);}
#v8-dashboard.open{
  opacity:1;pointer-events:auto;transform:translateY(0);
}

/* -- Grid dashboard -- */
.dash-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:1.5rem;
  max-width:1580px;
  margin:0 auto;
}

/* -- Singola card -- */
.dash-card{
  --ac:#8B5CF6;
  min-height:310px;
  background:linear-gradient(160deg,rgba(14,8,28,.72),rgba(6,3,14,.82));
  border:1px solid var(--v8-line,rgba(237,232,223,.07));
  border-radius:16px;
  display:flex;flex-direction:column;
  padding:0;
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  transition:border-color .3s,box-shadow .3s,transform .3s;
  animation:fu .6s both;
}
.dash-card:nth-child(2){animation-delay:.07s;}
.dash-card:nth-child(3){animation-delay:.13s;}
.dash-card:nth-child(4){animation-delay:.19s;}
.dash-card:nth-child(5){animation-delay:.25s;}
.dash-card:nth-child(6){animation-delay:.31s;}
.dash-card:nth-child(7){animation-delay:.37s;}
.dash-card:nth-child(8){animation-delay:.43s;}
.dash-card:nth-child(9){animation-delay:.49s;}
.dash-card:nth-child(10){animation-delay:.55s;}
.dash-card:nth-child(2n){--ac:#C8391A;}
.dash-card:nth-child(3n){--ac:#6EE7FF;}
.dash-card:nth-child(5n){--ac:#F59E0B;}

.dash-card-primary{
  grid-column:span 2;
}

.dash-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(440px 220px at 18% 0%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%),
    linear-gradient(90deg,color-mix(in srgb,var(--ac) 64%,transparent),rgba(200,57,26,.42));
  opacity:.24;
  pointer-events:none;
  transition:opacity .3s;
}
.dash-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--ac),rgba(200,57,26,.72),transparent);
  opacity:.7;pointer-events:none;
}
.dash-card:hover{
  border-color:color-mix(in srgb,var(--ac) 42%,rgba(237,232,223,.08));
  box-shadow:0 30px 90px rgba(0,0,0,.32),0 0 40px color-mix(in srgb,var(--ac) 14%,transparent);
  transform:translateY(-3px);
}
.dash-card:hover::before{opacity:.46;}

/* -- Card head -- */
.dash-card-head{
  padding:1.8rem 2rem 1.4rem;
  border-bottom:1px solid rgba(237,232,223,.05);
  flex-shrink:0;
  position:relative;z-index:1;
}
.dash-kicker{
  display:block;margin-bottom:.5rem;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--ac),#C8391A);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.dash-title{
  font-family:'BioRhyme',serif;font-weight:800;
  font-size:2.1rem;letter-spacing:-.04em;line-height:.9;
  color:#EDE8DF;margin-bottom:.5rem;
  text-shadow:0 0 28px color-mix(in srgb,var(--ac) 18%,transparent);
}
.dash-sub{
  font-size:1.28rem;letter-spacing:.08em;
  color:rgba(237,232,223,.28);display:block;
}

/* -- Card body -- riusa classi panel esistenti -- */
.dash-card-body{
  flex:1;overflow-y:auto;
  padding:1.6rem 2rem;
  scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.15) transparent;
  max-height:360px;
  position:relative;z-index:1;
}
.dash-card-body::-webkit-scrollbar{width:2px;}
.dash-card-body::-webkit-scrollbar-track{background:transparent;}
.dash-card-body::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);}

/* -- Footer link -- */
.dash-card-foot{
  display:block;
  padding:.9rem 2rem;
  border-top:1px solid rgba(237,232,223,.05);
  font-size:1.08rem;letter-spacing:.1em;
  color:color-mix(in srgb,var(--ac) 62%,rgba(237,232,223,.4));
  text-decoration:none;
  text-align:center;
  transition:color .2s,background .2s;
  flex-shrink:0;
}
.dash-card-foot:hover{color:#8B5CF6;background:rgba(139,92,246,.05);}
.dash-card[data-href]{cursor:pointer;}
.dash-card[data-href]:hover{border-color:rgba(139,92,246,.25);}
.dash-card-button{
  width:100%;
  border:0;
  background:transparent;
  font-family:inherit;
  cursor:pointer;
}

/* -- Link hub interni -- */
.hub-links{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin:.65rem 0 1rem;
}
.hub-link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.75rem;
  min-height:2.55rem;
  padding:.72rem .8rem;
  border:1px solid rgba(237,232,223,.06);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(237,232,223,.035),rgba(237,232,223,.012));
  color:rgba(237,232,223,.72);
  text-decoration:none;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.hub-link:hover{
  color:#EDE8DF;
  border-color:color-mix(in srgb,var(--ac) 36%,rgba(237,232,223,.08));
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(237,232,223,.018));
  transform:translateX(3px);
}
.hub-note{
  justify-self:end;
  max-width:8.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.82rem;
  letter-spacing:.08em;
  color:rgba(237,232,223,.24);
}
.rank-row{
  display:grid;
  grid-template-columns:2.4rem 1fr;
  gap:.8rem;
  align-items:center;
  padding:.58rem 0;
  border-bottom:1px solid rgba(237,232,223,.055);
}
.rank-row span{
  font-family:'DM Mono',monospace;
  font-size:.88rem;
  color:rgba(139,92,246,.72);
}
.rank-row strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
  color:rgba(237,232,223,.74);
}
.hub-disclaimer{
  margin-top:.9rem;
  font-size:.92rem;
  line-height:1.45;
  letter-spacing:.05em;
  color:rgba(237,232,223,.22);
}

/* -- Card prose / famiglie / sestine preview -- */
.dash-prose{
  font-size:.8rem;line-height:1.55;letter-spacing:.04em;
  color:rgba(237,232,223,.48);margin:.55rem 0 .85rem;
}
.dash-prose--sm{font-size:.72rem;margin:.3rem 0 .6rem;}
.dash-fam-list{display:flex;flex-direction:column;gap:.3rem;margin:.55rem 0 .85rem;}
.dash-fam{
  font-size:.72rem;letter-spacing:.05em;line-height:1.4;
  color:rgba(237,232,223,.42);padding-left:.6rem;border-left:2px solid rgba(237,232,223,.08);
}
.dash-fam--stat{border-color:rgba(99,169,210,.4);color:rgba(99,169,210,.75);}
.dash-fam--neu{border-color:rgba(139,92,246,.4);color:rgba(139,92,246,.75);}
.dash-fam--ibr{border-color:rgba(200,57,26,.4);color:rgba(200,57,26,.75);}
.dash-fam--gen{border-color:rgba(245,158,11,.4);color:rgba(245,158,11,.75);}
.ses-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.38rem 0;border-bottom:1px solid rgba(237,232,223,.04);
}
.ses-alg{
  font-size:.68rem;letter-spacing:.06em;color:rgba(237,232,223,.38);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 7rem;
}
.ses-balls{display:flex;gap:.22rem;flex-wrap:nowrap;}
.ses-b{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.55rem;height:1.55rem;border-radius:50%;
  font-size:.62rem;font-weight:600;font-family:'DM Mono',monospace;
  background:rgba(237,232,223,.06);color:rgba(237,232,223,.55);
  border:1px solid rgba(237,232,223,.1);
}
/* -- lf senza codice -- */
.lf{grid-template-columns:1fr auto;}

/* -- Card prossimo concorso -- */
#dc-next{--ac:#F59E0B;min-height:auto;}
#dc-next .dash-card-head{text-align:center;}
#dc-next .dash-title{
  font-family:'DM Mono',monospace;font-weight:400;
  font-size:2rem;letter-spacing:.1em;color:#F59E0B;
}
.next-mancano{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(237,232,223,.4);margin-top:.3rem;}
.next-date{font-family:'DM Mono',monospace;font-size:.78rem;color:rgba(237,232,223,.55);
  letter-spacing:.12em;margin-top:.2rem;}
.next-jk-label{font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(245,158,11,.5);margin-top:.5rem;}
.next-jk-value{font-family:'BioRhyme',serif;font-weight:800;font-size:1.5rem;
  color:#F59E0B;letter-spacing:.02em;line-height:1.2;}

/* Progressive jackpot label: Euro → € → (niente) */
.jk-euro{font-weight:500;font-size:.75em;letter-spacing:.06em;}
.jk-sym{display:none;font-weight:500;font-size:.85em;}

/* -- Card evidenziata -- */
.dash-card.dash-focus{border-color:rgba(139,92,246,.35);}
.dash-card.dash-focus::before{opacity:1;}

/* -- Responsive -- */
@media(max-width:1024px){
  #v8-dashboard{padding:1.5rem;}
  .dash-grid{gap:1.2rem;}
  .dash-card-primary{grid-column:auto;}
  .dash-title{font-size:1.7rem;}
  .dash-card-body{max-height:280px;}
}
@media(max-width:640px){
  #v8-dashboard{
    left:0;top:72px;bottom:56px;
    padding:.7rem .6rem;
    /* fade-hint bottom: segnala che c'è altro sotto */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent 100%);
  }
  /* rimuove il mask quando l'utente ha scrollato fino in fondo */
  #v8-dashboard.scrolled-end{
    -webkit-mask-image:none;
    mask-image:none;
  }

  /* ── Grid 2 colonne compatte ── */
  .dash-grid{
    grid-template-columns:repeat(2,1fr);
    gap:.55rem;
  }
  /* tutte le card uguali, compatte */
  .dash-card-primary{grid-column:auto;}

  .dash-card{
    min-height:auto;
    border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.2);
  }
  .dash-card-head{padding:.8rem .75rem .55rem;}
  .dash-card-body{display:none;}
  .dash-card-foot{
    padding:.5rem .75rem;
    font-size:.78rem;
    letter-spacing:.06em;
  }
  .dash-kicker{font-size:.62rem;letter-spacing:.16em;margin-bottom:.25rem;}
  .dash-title{font-size:1.1rem;line-height:1;margin-bottom:.22rem;}
  .dash-sub{font-size:.68rem;letter-spacing:.04em;}

  .hub-link{grid-template-columns:auto 1fr auto;padding:.5rem .55rem;}
  .hub-note{display:none;}

  /* ── Card concorso: mostra mini-sestina inline ── */
  #dc-concorso .dash-card-head{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;
  }
  #dc-concorso .dash-kicker{flex-basis:100%;}
  #dc-concorso .dash-title{flex:0 0 auto;}
  #dc-concorso .dash-sub{flex:0 0 auto;font-size:.72rem;}
  .mob-sestina{
    flex-basis:100%;
    display:flex;gap:.25rem;margin-top:.3rem;
  }
  .mob-sestina .ses-b{
    width:1.45rem;height:1.45rem;font-size:.58rem;
    background:rgba(237,232,223,.08);color:rgba(237,232,223,.65);
    border:1px solid rgba(237,232,223,.12);
  }

  /* ── Card prossimo concorso: sempre visibile su mobile ── */
  #dc-next .dash-card-body{display:block;padding:.2rem .75rem .55rem;}
  #dc-next .dash-title{font-size:.85rem;}
  .next-mancano{font-size:.5rem;margin-top:.1rem;}
  .next-date{display:none;}
  .next-jk-label{margin-top:.15rem;font-size:.45rem;}
  .next-jk-value{font-size:1.15rem;}

}
@media(max-width:520px){
  #v8-dashboard{top:60px;}
  #panel{top:60px;}
}