/* ── Side spaghetti strands ─────────────────────────────────── */
.side-noods {
  pointer-events: none;
}

.strands {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 90px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.strands-left  { left: 0; }
.strands-right { right: 0; }

/* Base strand style */
.strand {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}

/* ── 5 shades of spaghetti (yellowy-brown pasta tones) ── */
.strand.sa { stroke: #F0D070; }
.strand.sb { stroke: #D4A838; }
.strand.sc { stroke: #E8BC50; }
.strand.sd { stroke: #C49028; }
.strand.se { stroke: #B87820; }
/* 2 extra shades — sf fat pale-gold, sg thin dark-amber */
.strand.sf { stroke: #FFE090; stroke-width: 5; }
.strand.sg { stroke: #9A5E15; stroke-width: 1.8; }

/* ── Dangling FSM strands ──────────────────────────────────────── */
.fsm-strands {
  position: absolute;
  width: 28%;
  max-width: 160px;
  left: 50%;
  top: 42%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 0%;
  animation: dangle 8s ease-in-out infinite;
}

@keyframes dangle {
  0%, 100% { transform: translateX(-50%) rotate(-0.55deg); }
  50%       { transform: translateX(-50%) rotate(0.55deg); }
}

@media (min-width: 981px) {
  .fsm-strands {
    width: 34%;
    max-width: 240px;
    top: 39%;
  }
}

/* ── Mid meatballs ──────────────────────────────────────────────── */
.mid-noods {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.mid {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%,
    #cc5830 0%,
    #a83e1c 20%,
    #882808 42%,
    #641800 65%,
    #3a0a00 100%);
  box-shadow:
    inset 0 -5px 12px rgba(0,0,0,.60),
    inset 3px 4px 10px rgba(220,120,60,.18),
    0 3px 14px rgba(0,0,0,.70);
  opacity: 0.86;
}

.mid.m1 { width: 58px;  height: 58px;  top: 12%; left: 7%;   }
.mid.m2 { width: 75px;  height: 75px;  top: 40%; right: 8%;  }
.mid.m3 { width: 46px;  height: 46px;  top: 60%; left: 3%;   }
.mid.m4 { width: 70px;  height: 70px;  top: 74%; right: 5%;  }
.mid.m5 { width: 54px;  height: 54px;  top: 86%; left: 12%;  }
.mid.m6 { width: 42px;  height: 42px;  top: 24%; left: 46%;  }
.mid.m7 { width: 63px;  height: 63px;  top: 64%; right: 22%; }