:root {
  --bg: #eef6fb;
  --panel: rgba(255,255,255,0.92);
  --ink: #0f172a;
  --muted: #475569;
  --blue: #0ea5e9;
  --blue2: #2563eb;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f59e0b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 22px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(14,165,233,.24), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(245,158,11,.16), transparent 33%),
    linear-gradient(180deg,#f8fafc,#e0f2fe);
}

.mv6-lab {
  max-width: 1180px;
  margin: auto;
  padding: 22px;
  border-radius: 28px;
  background: rgba(248,250,252,.96);
  box-shadow: 0 18px 55px rgba(15,23,42,.16);
}

.mv6-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.mv6-header p {
  margin: 0 0 4px;
  color: var(--blue2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mv6-header h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
}

.mv6-header h1 span { color: var(--muted); }

.mv6-header > strong {
  padding: 12px 16px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg,#0f172a,#2563eb);
  white-space: nowrap;
}

.mv6-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.mv6-dashboard div {
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
}

.mv6-dashboard span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 4px;
}

.mv6-dashboard strong {
  font-size: 28px;
}

.state-card strong { color: var(--red); }
.state-card.closed strong { color: var(--green); }

.mv6-controls {
  padding: 16px;
  border-radius: 20px;
  background: #e0f2fe;
  margin-bottom: 14px;
}

.mv6-controls label {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  margin-bottom: 10px;
}

.mv6-controls input { width: 100%; }

.mv6-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.mv6-buttons button {
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  color: white;
  background: var(--blue2);
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}

.mv6-buttons button.active { background: #0f172a; }

.mv6-buttons .switch-btn {
  background: var(--red);
}

.mv6-buttons .switch-btn.closed {
  background: var(--green);
}

.mv6-stage-wrap {
  overflow: auto;
  border-radius: 24px;
  background: white;
  padding: 0;
}

.mv6-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-width: 760px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(45deg,#f5f5f5 25%,transparent 25%),
    linear-gradient(-45deg,#f5f5f5 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f5f5f5 75%),
    linear-gradient(-45deg,transparent 75%,#f5f5f5 75%);
  background-size: 32px 32px;
  background-position: 0 0,0 16px,16px -16px,-16px 0;
  transform-origin: center center;
  transition: transform .25s;
}

.circuit-img,
#fxCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.circuit-img {
  object-fit: contain;
  opacity: 0;
  transition: opacity .18s linear;
  pointer-events: none;
}

.circuit-img.visible { opacity: 1; }

#fxCanvas { z-index: 3; pointer-events: none; }

.digital-meter {
  position: absolute;
  left: 35.0%;
  top: 75.0%;
  width: 165px;      /* controlla la larghezza */
  height: 70px;      /* controlla l'altezza */
  z-index: 5;

  padding: 0;
  border-radius: 8px;
  background: linear-gradient(180deg,#101827,#020617);
  color: #dff6ff;
  box-shadow: inset 0 0 18px rgba(14,165,233,.22), 0 12px 22px rgba(15,23,42,.28);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.digital-meter span {
  font-size: 20px;
  line-height: 1;
}

.digital-meter strong {
  font-size: 60px;   /* controlla la dimensione dei numeri */
  line-height: 1;
  color: #7dd3fc;
}

.formula-box {
  position: absolute;
  right: 3%;
  bottom: 4%;
  z-index: 5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.formula-box span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: white;
  font-weight: 800;
  font-size: 13px;
}

.guide-bubble {
  position: absolute;
  left: 5%;
  bottom: 7%;
  width: min(380px,42%);
  z-index: 8;
  padding: 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 4px solid #38bdf8;
  box-shadow: 0 15px 28px rgba(15,23,42,.18);
}

.guide-bubble.hidden,
.xray-panel.hidden { display: none; }

.guide-bubble b { color: #0369a1; }
.guide-bubble p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }

.xray-panel {
  position: absolute;
  right: 3%;
  top: 4%;
  z-index: 8;
  width: min(430px,38%);
  padding: 15px;
  border-radius: 18px;
  background: rgba(15,23,42,.92);
  color: white;
  box-shadow: 0 15px 28px rgba(15,23,42,.28);
}

.xray-panel h3 { margin: 0 0 8px; color: #7dd3fc; }
#xrayCanvas { width: 100%; border-radius: 12px; background: #020617; }
.xray-panel p { margin: 8px 0 0; color: #cbd5e1; line-height: 1.4; }

.mv6-explain,
.mv6-quiz {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.mv6-explain { border-left: 8px solid var(--blue); }

.mv6-explain h2,
.mv6-quiz h2 { margin: 0 0 8px; }

.mv6-explain p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

#quizAnswers {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#quizAnswers button {
  border: 0;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  background: #e0f2fe;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}

#quizAnswers button.correct { background: #bbf7d0; }
#quizAnswers button.wrong { background: #fecaca; }
#quizFeedback { min-height: 24px; font-weight: 900; }

@media (max-width: 820px) {
  body { padding: 10px; }
  .mv6-lab { padding: 14px; }
  .mv6-header { flex-direction: column; align-items: flex-start; }
  .mv6-dashboard { grid-template-columns: repeat(2,1fr); }
  .digital-meter { left: 38%; top: 73%; }
}

@media (max-width: 560px) {
  .mv6-dashboard { grid-template-columns: 1fr; }
  .mv6-controls label { flex-direction: column; gap: 6px; }
}


/* === Megistone Path Editor flottante === */
.path-editor-panel {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 9999;
  width: min(360px, calc(100vw - 32px));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, .96);
  color: #fff;
  box-shadow: 0 18px 50px rgba(15,23,42,.35);
  border: 1px solid rgba(125,211,252,.35);
}
.path-editor-panel.hidden { display: none; }
.path-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg,#0f172a,#2563eb);
  cursor: move;
  user-select: none;
}
.path-editor-header button {
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.path-editor-body { padding: 14px; }
.path-editor-body p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #dbeafe;
}
#pathOutput {
  width: 100%;
  height: 150px;
  resize: vertical;
  border: 1px solid rgba(125,211,252,.45);
  border-radius: 12px;
  padding: 10px;
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
  color: #e0f2fe;
  background: #020617;
}
.path-editor-actions { display: flex; gap: 8px; margin-top: 10px; }
.path-editor-actions button {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 10px;
  font-weight: 900;
  cursor: pointer;
  color: white;
  background: #0ea5e9;
}
.mv6-stage.path-editing { cursor: crosshair; }
.mv6-stage.path-editing #fxCanvas { pointer-events: auto; }

.path-save-status{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.25;
  color:#bae6fd;
  opacity:.95;
}
.path-editor-actions{
  flex-wrap:wrap;
}