/* Core layout */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#f0f7fb; color:#1a202c; }
body { line-height:1.4; }

header, footer { text-align:center; padding:1rem 1.5rem; background:linear-gradient(90deg,#2b6cb0,#3182ce); color:#fff; }
header h1 { margin:.2rem 0 .4rem; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.5px; }
.tagline { margin:0; font-weight:300; }

.app { display:flex; flex-wrap:wrap; max-width:1500px; margin:0 auto; padding:1rem; gap:1rem; }
.visual-panel { flex:2 1 760px; background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:.5rem; position:relative; box-shadow:0 4px 12px -4px rgba(0,0,0,.12); }
.info-panel { flex:1 1 340px; display:flex; flex-direction:column; gap:1rem; }

.plant-wrapper { width:100%; aspect-ratio:3 / 1; position:relative; }
svg { width:100%; height:100%; font-family:inherit; }
.stage-label { font-size:12px; fill:#1a202c; pointer-events:none; }
.stage-block { cursor:pointer; transition:filter .35s, transform .35s; }
.stage-block:focus, .stage-block.active, .stage-block:hover { filter:drop-shadow(0 0 6px rgba(49,130,206,.65)); outline:3px solid #2b6cb0; outline-offset:4px; }
.stage-block.active { animation: pulse 3s infinite; }

@keyframes pulse { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

/* Droplet animation */
#droplet { transform-origin:center; }
.animate-droplet { animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translate(-6px,0); } 50% { transform:translate(6px,0); } }

/* Stage navigation */
.stage-nav { background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:.75rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.10); overflow:auto; max-height:220px; }
.stage-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.stage-nav button { width:100%; background:#edf7ff; border:1px solid #b3cee6; border-radius:8px; padding:.5rem .6rem; text-align:left; font-size:.9rem; cursor:pointer; position:relative; line-height:1.2; }
.stage-nav button:hover, .stage-nav button:focus { outline:none; background:#d7edff; }
.stage-nav button.active { background:#2b6cb0; color:#fff; border-color:#2b6cb0; }
.stage-nav button .stage-index { font-weight:600; margin-right:.4rem; }

.stage-content { background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:1rem 1.1rem; min-height:210px; box-shadow:0 4px 10px -4px rgba(0,0,0,.10); font-size:.95rem; display:flex; flex-direction:column; gap:.65rem; }
.stage-content h2 { margin:.2rem 0 .3rem; font-size:1.15rem; }
.stage-content ul { margin:.25rem 0 .5rem 1.1rem; padding:0; }
.stage-content li { margin:.25rem 0; }

.controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:.6rem .8rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.08); }
.btn { background:#2b6cb0; color:#fff; border:none; border-radius:8px; padding:.55rem .9rem; font-size:.9rem; cursor:pointer; font-weight:500; line-height:1; display:inline-flex; align-items:center; gap:.3rem; }
.btn.secondary { background:#4a5568; }
.btn:hover, .btn:focus { background:#225d99; outline:none; }
.btn.secondary:hover, .btn.secondary:focus { background:#2d3748; }
.speed-label { display:flex; align-items:center; gap:.3rem; font-size:.8rem; }
.speed-label select { padding:.25rem .4rem; border-radius:6px; border:1px solid #94b9d7; }
.auto-advance { font-size:.75rem; display:flex; align-items:center; gap:.3rem; }

.quiz { background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:1rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.1); }
.quiz h2 { margin-top:0; }
.quiz button.answer { display:block; width:100%; margin:.4rem 0; background:#edf7ff; border:1px solid #b3cee6; border-radius:8px; padding:.5rem .6rem; text-align:left; cursor:pointer; font-size:.85rem; }
.quiz button.answer:hover, .quiz button.answer:focus { background:#d7edff; }
.quiz button.answer.correct { background:#2f855a; color:#fff; border-color:#2f855a; }
.quiz button.answer.incorrect { background:#c53030; color:#fff; border-color:#9b2c2c; }
.feedback { font-weight:600; margin-top:.5rem; }

footer { font-size:.75rem; }

/* Lab Simulation */
.lab { background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:1rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:.75rem; }
.lab-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem .9rem; }
.lab-controls label { display:flex; flex-direction:column; gap:.25rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; color:#2b5068; }
.lab-controls input[type=range] { width:100%; accent-color:#2b6cb0; }
.lab-controls output { font-size:.75rem; font-weight:600; background:#edf7ff; padding:.15rem .4rem; border-radius:6px; align-self:flex-start; }
.lab-metrics { font-size:.75rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.4rem; }
.lab-metrics .metric { background:#edf7ff; padding:.4rem .5rem; border-radius:8px; border:1px solid #b3cee6; display:flex; flex-direction:column; gap:.2rem; }
.lab-metrics .metric strong { font-size:.65rem; font-weight:700; letter-spacing:.5px; color:#234e52; }
.hint { color:#4a5568; font-size:.65rem; }
.small { font-size:.75rem; }
.floc-visual { background:#0f3953; border:2px solid #0d2d41; border-radius:12px; padding:.25rem; display:flex; justify-content:center; }
#flocCanvas { width:100%; height:auto; image-rendering:pixelated; }

/* Graphs */
.graphs { background:#ffffff; border:2px solid #c3d9ef; border-radius:14px; padding:1rem; box-shadow:0 4px 10px -4px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:.8rem; }
.graph-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.graph-row figure { margin:0; background:#f7fbff; border:1px solid #c3d9ef; border-radius:10px; padding:.4rem .5rem .6rem; display:flex; flex-direction:column; gap:.3rem; }
.graph-row figcaption { font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#2b5068; }
.graph-legend { display:flex; flex-wrap:wrap; gap:.5rem; font-size:.6rem; }
.legend-item { display:flex; align-items:center; gap:.25rem; background:#edf7ff; padding:.25rem .4rem; border-radius:6px; border:1px solid #b3cee6; }
.legend-color { width:14px; height:14px; border-radius:3px; }

/* Stage-specific decorative animations (placeholders) */
.stage-block[data-stage="1"].active { filter:drop-shadow(0 0 6px rgba(59,130,246,.8)) brightness(1.05); }
.stage-block[data-stage="2"].active { animation: settle 4s linear infinite; }
.stage-block[data-stage="3"].active { animation: filterFlow 5s linear infinite; }
.stage-block[data-stage="4"].active { animation: sparklePulse 3s ease-in-out infinite; }

/* Sparkles overlay (disinfection) */
.stage-block[data-stage="4"].active::after { content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 3px, transparent 4px),
  radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 2px, transparent 3px),
  radial-gradient(circle at 40% 75%, rgba(255,255,255,.6) 0 2.5px, transparent 3px);
  animation: sparkleDrift 6s linear infinite; mix-blend-mode:screen; }

@keyframes sparkleDrift { 0% { transform:translateY(0); opacity:1; } 70% { opacity:.9; } 100% { transform:translateY(-20px); opacity:0; } }

@keyframes settle { 0% { transform:translateY(-2px); } 50% { transform:translateY(3px); } 100% { transform:translateY(-2px); } }
@keyframes filterFlow { 0% { transform:skewY(0deg); } 50% { transform:skewY(3deg); } 100% { transform:skewY(0deg); } }
@keyframes sparklePulse { 0%,100% { filter:drop-shadow(0 0 4px rgba(255,255,255,.4)); } 50% { filter:drop-shadow(0 0 10px rgba(255,255,255,.9)); } }

/* Sedimentation particles */
#sedimentParticles circle.sed-particle { fill:#5b6d89; opacity:.7; transition:opacity .4s; }
#sedimentParticles circle.sed-particle.small { opacity:.45; }
#sedimentParticles circle.sed-particle.large { fill:#4a5970; opacity:.85; }
.stage-block[data-stage="2"].active #sedimentParticles circle.sed-particle { opacity:1; }
/* Slight water gradient overlay (optional aesthetic) */
.stage-block[data-stage="2"].active rect { fill:url(#sedGrad); }

/* Pipes */
.pipe-shell { fill:#2d3748; stroke:#1a202c; stroke-width:2; }
.pipe-water { fill:url(#waterDirty); transition: width .9s ease, fill 1.2s linear; rx:4; }
.pipe[data-filled="true"] .pipe-water { width:30px; }
.pipe[data-stage-progress="early"] .pipe-water { filter:brightness(.9) saturate(.8); }
.pipe[data-stage-progress="mid"] .pipe-water { filter:brightness(1) saturate(1); }
.pipe[data-stage-progress="late"] .pipe-water { filter:brightness(1.1) saturate(1.3); }

/* Active pipe shimmer highlight */
.pipe.active-flow .pipe-water { filter:brightness(1.35) saturate(1.5) drop-shadow(0 0 4px rgba(255,255,255,.4)); }
/* When not active-flow but still filling keep previous logic; highlight overrides */

/* Flow shimmer (mask pattern translation handled via JS fallback; CSS keyframes for future) */
@keyframes flowShift { from { transform:translateX(0); } to { transform:translateX(-40px); } }
.pipe[data-filled="true"] .pipe-water { position:relative; }

/* Droplet color will transition via inline style updates; ensure smooth */
#droplet path { transition: fill 1s linear, stroke 1s linear; }

/* Responsive */
@media (max-width: 980px) {
  .app { flex-direction:column; }
  .visual-panel, .info-panel { flex:1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-block.active, #droplet, .animate-droplet { animation:none !important; }
  .visual-panel::after { content:'Animation reduced for accessibility.'; position:absolute; top:.5rem; right:.75rem; background:#1a202c; color:#fff; padding:.25rem .5rem; font-size:.6rem; border-radius:4px; letter-spacing:.5px; }
}

/* Wide desktop optimization */
@media (min-width:1300px) {
  .app { display:grid; grid-template-columns: minmax(760px,1fr) 440px 440px; grid-auto-rows: min-content; align-items:start; }
  .visual-panel { grid-column:1 / 2; grid-row:1 / span 3; position:sticky; top:1rem; height:calc(100vh - 2rem); display:flex; flex-direction:column; }
  .plant-wrapper { flex:1 1 auto; }
  .info-panel { grid-column:2 / 4; grid-row:1 / span 3; display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:min-content; gap:1rem; align-content:start; }
  .stage-nav { grid-column:1 / 2; max-height:360px; position:sticky; top:1rem; }
  .stage-content { grid-column:2 / 3; min-height:360px; position:sticky; top:1rem; }
  .controls { grid-column:1 / 3; }
  .quiz { grid-column:1 / 2; }
  .lab { grid-column:2 / 3; }
  .graphs { grid-column:1 / 3; }
  footer { margin-top:2rem; }
}