/* =========================================================
   CHIMICA — coppia entangled e test di Bell
   ========================================================= */
.chimica-hero { --hero-glow: rgb(140 110 255 / 14%); }

.pair-art { justify-self: center; width: min(100%, 480px); }
.pair-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.pair-rot { transform-origin: 200px 200px; animation: rot 26s linear infinite; }
.pair-link {
  stroke: rgb(184 214 255 / 45%);
  stroke-width: 1.2;
  stroke-dasharray: 4 7;
  animation: dash 1.6s linear infinite;
}
.pair-link-2 { stroke: rgb(240 181 110 / 40%); animation-direction: reverse; }
.arrow-a { transform-origin: 92px 200px; animation: rot 3.2s linear infinite; }
.arrow-b { transform-origin: 308px 200px; animation: rot 3.2s linear infinite; animation-delay: -1.6s; }
.pa { transform-origin: 92px 200px; animation: counter 26s linear infinite; }
.pb { transform-origin: 308px 200px; animation: counter 26s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes counter { to { transform: rotate(-360deg); } }
@keyframes dash { to { stroke-dashoffset: -22; } }

.panel-label {
  margin-bottom: 1.2rem;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- simulatore coppia ---------- */
.ent-layout, .bell-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.bell-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

.ent, .bell { padding: clamp(1.3rem, 3vw, 2.2rem); }

.ent-stage {
  display: grid;
  grid-template-columns: 1fr minmax(60px, 1.1fr) 1fr;
  align-items: center;
  gap: .5rem;
  padding: 1rem 0 1.4rem;
}
.pt { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.pt-orb {
  --c: 240 181 110;
  position: relative;
  display: grid;
  width: clamp(76px, 10vw, 104px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 30%), rgb(var(--c) / 55%) 45%, rgb(var(--c) / 12%) 72%);
  box-shadow: 0 0 40px rgb(var(--c) / 25%), inset 0 0 0 1px rgb(var(--c) / 50%);
  transition: box-shadow .4s;
}
.pt[data-pt="B"] .pt-orb { --c: 120 175 255; }
.pt-arrow {
  width: 46%;
  fill: none;
  stroke: #04060c;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .7s var(--ease-out), opacity .3s;
}
.pt.is-super .pt-arrow { animation: rot 1.4s linear infinite; opacity: .55; }
.pt[data-pt="B"].is-super .pt-arrow { animation-delay: -.7s; }
.pt.is-down .pt-arrow { transform: rotate(180deg); }
.pt.is-flash .pt-orb { animation: flash .7s var(--ease-out); }
@keyframes flash {
  0% { box-shadow: 0 0 0 0 rgb(var(--c) / 90%), 0 0 90px rgb(255 255 255 / 60%); }
  100% { box-shadow: 0 0 0 26px rgb(var(--c) / 0%), 0 0 40px rgb(var(--c) / 25%); }
}
.pt-name { color: var(--ink-soft); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .5rem; }
.pt-state { min-height: 1.6em; font-size: 1.05rem; font-weight: 400; }

.ent-link { position: relative; display: grid; justify-items: center; gap: .4rem; }
.ent-wave { width: 100%; height: 22px; overflow: visible; }
.ent-wave path {
  fill: none;
  stroke: rgb(184 214 255 / 55%);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  animation: dash 1s linear infinite;
  transition: opacity .5s;
}
.ent.is-measured .ent-wave path { opacity: .15; animation-play-state: paused; }
.ent-dist { color: var(--ink-mute); font-size: .66rem; letter-spacing: .06em; text-align: center; }

.ent-controls, .bell-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.ent-controls .btn:disabled, .bell-btns .btn:disabled { opacity: .4; cursor: default; }

.ent-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin: 1.5rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.ent-stats dt { color: var(--ink-mute); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.ent-stats dd { margin: .25rem 0 0; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 250; font-variant-numeric: tabular-nums; }

.ent-log {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 30px;
  margin-bottom: 1rem;
}
.ent-log span {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: 30px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1;
  animation: pop .4s var(--ease-out);
}
.ent-log b:first-child { color: var(--amber); font-weight: 600; }
.ent-log b:last-child { color: #8fbfff; font-weight: 600; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---------- grafico di Bell ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0 0 .8rem; padding: 0; list-style: none; color: var(--ink-soft); font-size: .76rem; }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.sw { display: inline-block; width: 18px; height: 2px; border-radius: 2px; }
.sw-blue { background: var(--c-blue); }
.sw-amber { background: var(--c-amber); }
.sw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--deep); }

.bell-chart { position: relative; }
.bell-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.bell-chart .grid line { stroke: rgb(205 222 255 / 9%); stroke-width: 1; }
.bell-chart .grid line.zero { stroke: rgb(205 222 255 / 20%); }
.bell-chart .axis text { fill: var(--ink-mute); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.bell-chart .axis-title { fill: var(--ink-soft); font-size: 11px; font-family: Montserrat, system-ui, sans-serif; }
.bell-chart .qm { fill: none; stroke: var(--c-blue); stroke-width: 2; stroke-linecap: round; }
.bell-chart .lhv { fill: none; stroke: var(--c-amber); stroke-width: 2; stroke-linecap: round; }
.bell-chart .lbl { font-size: 11.5px; font-family: Montserrat, system-ui, sans-serif; fill: var(--ink-soft); }
.bell-chart .pts circle.dot { fill: var(--ink); stroke: #0b0f18; stroke-width: 2; }
.bell-chart .pts circle.hit { fill: transparent; }
.bell-chart .pts g { animation: pop .45s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.bell-chart .cursor-line { stroke: rgb(205 222 255 / 35%); stroke-width: 1; }
.bell-chart .angle-mark { stroke: var(--amber-soft); stroke-width: 1; opacity: .5; }
.bell-chart .cross circle { stroke: #0b0f18; stroke-width: 2; }

.tip {
  position: absolute;
  z-index: 5;
  min-width: 170px;
  padding: .6rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgb(7 10 17 / 94%);
  color: var(--ink);
  font-size: .76rem;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity .15s;
}
.tip.on { opacity: 1; }
.tip b { font-weight: 600; }
.tip .k { display: inline-block; width: 10px; height: 2px; margin-right: .4rem; vertical-align: middle; }

.bell-controls { display: grid; gap: .7rem; margin-top: 1rem; }

.bell-table { margin: 1.2rem 0 .8rem; color: var(--ink-soft); font-size: .8rem; }
.bell-table summary { cursor: pointer; color: var(--ink-soft); }
.bell-table table { width: 100%; margin-top: .7rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bell-table th, .bell-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: right; }
.bell-table th:first-child, .bell-table td:first-child { text-align: left; }
.bell-table th { color: var(--ink-mute); font-weight: 500; font-size: .7rem; letter-spacing: .06em; }

@media (max-width: 900px) {
  .ent-layout, .bell-layout { grid-template-columns: 1fr; }
  .pair-art { width: min(80%, 380px); }
}
@media (max-width: 600px) {
  .ent-stats dd { font-size: 1.3rem; }
  .ent-stage { grid-template-columns: 1fr 64px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pair-rot, .pa, .pb, .arrow-a, .arrow-b, .pt-arrow { animation: none !important; }
}