/* =========================
   Stylesheet for Glia Under Stress
   ========================= */
:root{
  --panel:#141832;
  --panel-2:#1b2146;
  --ink:#e8ecff;
  --muted:#ffffff;
  --accent:#67e8f9;
  --accent-2:#a78bfa;
  --accent-3:#34d399;
  --alert:#fb7185;
  --warn:#fbbf24;
  --good:#4ade80;
  --chip:#233067;
  --chip-2:#2b3b7a;
}

*{box-sizing:border-box}
body{
  color:var(--ink); 
}
header h1{margin:0 0 6px; }
header p{margin:0; color:var(--muted)}
.wrap{max-width:1200px; margin:0 auto; padding:16px 0}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 16px}
.tab{
  border:1px solid #ffffff; background:#430D57;
  padding:10px 14px; border-radius:12px; cursor:pointer; color:var(--muted);
  transition:.2s transform, .2s background, .2s color, .2s border;
}
.tab.active{color:#430D57; border-color:#ffffff; background:#f9c107; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25)}
section.scene{
  display:none; border-radius:20px; padding:16px;
}
section.scene.active{display:block}

.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} }

.card{
  border:1px solid #430d58; border-radius:14px; padding:12px; background:linear-gradient(180deg, #430d58, #430d58);
  box-shadow:0 6px 14px rgba(0,0,0,.25); position:relative; overflow:hidden;
}
.card h3{margin:6px 0 8px; color:#ffffff;}
.sub{color:#430d58; font-size:.95rem}
.card p.sub, .card p{color: #ffffff;}

.chiprow{display:flex; gap:8px; flex-wrap:wrap}
.chip{ background:var(--chip); border:1px solid #415; color:var(--ink); padding:6px 10px; border-radius:999px; font-size:.9rem; }

.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.control{ background:#430d58; border:1px solid #ffffff; padding:10px 12px; border-radius:10px; min-width: 220px; }
label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
input[type="range"]{width:100%}
select, .toggle{ width:100%; background:#0f1434; color:var(--ink); border:1px solid #445; border-radius:8px; padding:8px 10px; }
.toggle{display:flex; align-items:center; gap:8px; cursor:pointer}
.toggle input{accent-color: var(--accent-3)}

.viz{ border:1px dashed #3b4a80; border-radius:12px; min-height:180px; display:flex; align-items:center; justify-content:center; background:#0e1330; position:relative; overflow:hidden; }

.note{font-size:.9rem; color:#430d58;}

.ok{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--alert)}

.dnd-wrap{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.dnd-pool, .dnd-bucket{ min-height:120px; border:2px dashed #3e4a86; border-radius:12px; padding:8px; background:#0d1231; }
.token{ display:inline-block; padding:6px 10px; margin:6px; border-radius:999px; cursor:grab; user-select:none; background:#243173; border:1px solid #5160aa; }
.bucket-title{margin:6px 0 10px; color:var(--muted)}
.bucket.ok{border-color:#22c55e} .bucket.bad{border-color:#ef4444}

.quiz-q{margin:8px 0 6px}
.mcq label{display:block; margin:4px 0; cursor:pointer}
.feedback{font-size:.9rem; margin-top:6px}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--alert)}

.sr-only{position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.legend{font-size:.85rem; color:#aec2ff; margin-top:6px}
.card .row{display:flex; gap:12px; margin: 0 15px; align-items:center; flex-wrap:wrap}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#0004; border:1px solid #345; padding:2px 6px; border-radius:6px}