/*
  IS IT CONDUCTIVE? — Touch 2 Tech activity
  Uses the shared app shell and foundation; this file owns only the experiment.
*/
.conductive-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(47,230,201,.16), transparent 34%),
    var(--t2t-stage-bg);
  color: var(--t2t-stage-text);
  overflow-x: hidden;
}

.conductive-stage {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0 var(--t2t-space-3) var(--t2t-space-4);
}

.experiment { display:flex; flex-direction:column; gap:16px; }

.experiment__intro, .controls-heading, .control-row {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}

.conductive-kicker {
  color:var(--t2t-teal); font-size:.78rem; font-weight:900; letter-spacing:.12em;
}
.experiment__intro h2, .controls-heading h2 {
  margin-top:4px; color:#fff; font-size:clamp(1.35rem,3vw,2.1rem);
}
.experiment__hint { margin-top:6px; color:var(--t2t-stage-text-soft); font-size:.9rem; font-weight:700; }

.test-count {
  min-width:76px; padding:9px 14px; border:2px solid rgba(255,255,255,.14);
  border-radius:16px; background:rgba(255,255,255,.06); text-align:center;
}
.test-count span { display:block; color:var(--t2t-stage-text-soft); font-size:.62rem; font-weight:900; letter-spacing:.1em; }
.test-count strong { display:block; margin-top:2px; color:#fff; font-size:1.35rem; }

.lab-board {
  position:relative; isolation:isolate; min-height:430px; overflow:hidden;
  border:3px solid rgba(255,255,255,.12); border-radius:28px;
  background:linear-gradient(145deg,#2d1b50,#160c29);
  box-shadow:0 14px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.circuit-art { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.62; pointer-events:none; }
.circuit-art img { width:100%; height:100%; object-fit:cover; }

.test-rail {
  position:absolute; top:48%; width:23%; height:34px; border-radius:17px;
  background:linear-gradient(#3df0d5,#1cae9a); border:4px solid #241640;
  box-shadow:0 7px 0 rgba(0,0,0,.28); z-index:3;
}
.test-rail span { position:absolute; top:-26px; left:50%; transform:translateX(-50%); white-space:nowrap;
  color:#d9fff8; font-size:.58rem; font-weight:900; letter-spacing:.08em; }
.test-rail--left { left:5%; }
.test-rail--right { right:5%; }

.material-zone {
  position:absolute; z-index:5; left:50%; top:48%; transform:translate(-50%,-50%);
  width:min(300px,34vw); min-width:220px; height:145px; border:3px dashed rgba(255,255,255,.24);
  border-radius:24px; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px; background:rgba(20,10,38,.76); backdrop-filter:blur(5px);
  transition:border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.material-zone.is-testing { border-color:var(--t2t-teal); background:rgba(47,230,201,.12); transform:translate(-50%,-50%) scale(1.02); }
.material-illustration { width:100px; height:90px; display:flex; align-items:center; justify-content:center; }
.material-illustration svg { width:100%; height:100%; overflow:visible; }
.material-label { display:flex; flex-direction:column; gap:3px; }
.material-label__eyebrow { color:var(--t2t-stage-text-soft); font-size:.6rem; font-weight:900; letter-spacing:.1em; }
.material-label strong { color:#fff; font-size:clamp(1.2rem,2.5vw,1.8rem); }

.bulb { position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%); width:74px; text-align:center; }
.bulb__glass { width:58px; height:58px; margin:auto; border:5px solid #6d5a8f; border-radius:50% 50% 46% 46%;
  background:rgba(140,107,255,.2); box-shadow:inset 0 0 16px rgba(140,107,255,.18); transition:all 180ms ease; }
.bulb__glass span { display:block; width:12px; height:12px; margin:17px auto; border-radius:50%; background:#8c6bff; opacity:.5; }
.bulb__base { width:34px; height:18px; margin:-2px auto 0; border:4px solid #241640; border-top:0; border-radius:0 0 8px 8px; background:#70627f; }
.lab-board.is-conductive .bulb__glass { border-color:#ffc93c; background:#ffc93c; box-shadow:0 0 34px rgba(255,201,60,.75), inset 0 0 20px #fff5bf; }
.lab-board.is-conductive .bulb__glass span { background:#fff; opacity:1; box-shadow:0 0 20px #fff; }
.lab-board.is-conductive .electricity { opacity:1; }
.electricity { position:absolute; z-index:2; left:21%; right:21%; top:42%; height:14px; opacity:0; transition:opacity 120ms ease; pointer-events:none; }
.electricity i { position:absolute; top:0; width:11px; height:11px; border-radius:50%; background:#fff6b8; box-shadow:0 0 12px #ffc93c; animation:flow 850ms linear infinite; }
.electricity i:nth-child(1){animation-delay:0ms}.electricity i:nth-child(2){animation-delay:170ms}.electricity i:nth-child(3){animation-delay:340ms}.electricity i:nth-child(4){animation-delay:510ms}.electricity i:nth-child(5){animation-delay:680ms}
@keyframes flow { from{left:0;opacity:0} 15%{opacity:1} to{left:100%;opacity:0} }

.result {
  display:flex; align-items:center; gap:14px; min-height:76px; padding:12px 16px;
  border:2px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.05);
}
.result__icon { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.35rem; font-weight:900; }
.result strong { color:#fff; font-size:1rem; letter-spacing:.03em; }
.result p { margin-top:3px; color:var(--t2t-stage-text-soft); font-size:.84rem; font-weight:700; }
.result[data-state="conductive"] { border-color:rgba(47,230,201,.5); background:rgba(47,230,201,.08); }
.result[data-state="conductive"] .result__icon { background:var(--t2t-teal); color:#241640; }
.result[data-state="not-conductive"] { border-color:rgba(255,93,115,.45); background:rgba(255,93,115,.08); }
.result[data-state="not-conductive"] .result__icon { background:#ff5d73; color:#241640; }
.result__next { margin-left:auto; white-space:nowrap; }

.input-indicator { min-height:20px; color:var(--t2t-stage-text-soft); font-size:.8rem; font-weight:700; text-align:center; }

.conductive-controls { margin-top:4px; padding:20px; border:2px solid rgba(255,255,255,.13); border-radius:22px; background:rgba(36,21,66,.92); }
.control-label { color:#fff; font-weight:900; }
.control-help { margin-top:4px; color:var(--t2t-stage-text-soft); font-size:.78rem; }
.mapping-button { min-width:150px; padding:11px 18px; border:2px solid var(--t2t-teal); border-radius:12px; background:rgba(47,230,201,.08); color:#fff; font:inherit; font-weight:900; cursor:pointer; }
.mapping-button.is-capturing { background:var(--t2t-teal); color:#241640; }
.controls-error { margin-top:12px; color:#ffb3be; font-weight:800; }
.text-button { margin-top:12px; border:0; background:none; color:var(--t2t-teal); font:inherit; font-weight:900; text-decoration:underline; cursor:pointer; }

@media (max-width:760px) {
  .experiment__intro { align-items:flex-start; }
  .lab-board { min-height:390px; }
  .material-zone { min-width:190px; width:44vw; }
  .test-rail { width:18%; }
  .test-rail--left { left:3%; }.test-rail--right { right:3%; }
}
@media (max-width:560px) {
  .conductive-stage { padding-inline:12px; }
  .app-header__back,.app-header__fullscreen { padding:8px 10px; font-size:.76rem; }
  .experiment__intro { display:block; }.test-count { display:inline-block; margin-top:10px; }
  .lab-board { min-height:360px; }
  .material-zone { width:58vw; min-width:180px; height:130px; }
  .material-illustration { width:78px; height:72px; }
  .test-rail span { display:none; }
  .result { align-items:flex-start; flex-wrap:wrap; }.result__next { margin-left:0; width:100%; }
  .control-row { align-items:flex-start; flex-direction:column; }.mapping-button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .electricity i { animation:none; }.material-zone,.bulb__glass { transition:none; }
}