/* Neuroscience. All rules scoped under .nsc-* (the app inlines only this file). */

/* 0. talking with Tan */
.nsc-tan { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nsc-tan img { display: block; width: 150px; height: auto; }
.nsc-chat { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 6px; min-height: 110px; }
.nsc-b { max-width: 82%; padding: 8px 12px; border-radius: 16px; font: 600 15px var(--sans); line-height: 1.3; animation: nscIn .3s ease-out both; }
@keyframes nscIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nsc-you { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; }
.nsc-him { align-self: flex-start; background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); border-bottom-left-radius: 4px; font: 800 18px var(--serif); }
.nsc-note { align-self: flex-start; background: none; color: var(--dim); font: italic 600 14px var(--sans); padding: 0 12px; }
.nsc-qs { width: 100%; }

/* 1. the jar */
.nsc-jar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nsc-jar img { display: block; max-height: 230px; max-width: 100%; border-radius: 12px; }
.nsc-jar span { font: 600 13px var(--sans); color: var(--dim); }

/* the brain map */
.nsc-map { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nsc-who { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 330px; }
.nsc-who img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.nsc-say { flex: 1; min-height: 56px; padding: 8px 12px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--raised); border: 1px solid var(--line-strong); display: flex; flex-direction: column; justify-content: center; }
.nsc-say b { font: 800 16px var(--sans); color: var(--text); }
.nsc-say span { font: 600 13px var(--sans); color: var(--dim); }
.nsc-say span:empty { display: none; }
.nsc-say.pop { animation: nscIn .3s ease-out; }
.nsc-brain { width: 100%; max-width: 330px; height: auto; overflow: visible; }
.nsc-cortex { fill: #f2b8c6; stroke: #c9849a; stroke-width: 2; }
.nsc-cereb { fill: #e3a0b4; stroke: #c9849a; stroke-width: 2; }
.nsc-stem { fill: #d892a8; }
.nsc-fold { fill: none; stroke: rgba(150,80,105,.45); stroke-width: 2; stroke-linecap: round; }
.nsc-part { cursor: pointer; }
.nsc-part ellipse, .nsc-part path { stroke: #fff; stroke-width: 2; transition: fill .3s, opacity .3s; filter: drop-shadow(0 0 5px rgba(255,255,255,.55)); }
.nsc-speech ellipse { fill: #f2994a; }
.nsc-move path { fill: #3fd69a; }
.nsc-sight ellipse { fill: #7b8cff; }
.nsc-memory path { fill: #fcc050; }
.nsc-hit { fill: transparent; stroke: none !important; filter: none !important; }
.nsc-part.off ellipse, .nsc-part.off path { fill: #6e6960; filter: none; opacity: .8; }
.nsc-part.right ellipse, .nsc-part.right path { stroke: var(--mint); stroke-width: 4; }
.nsc-part.wrong ellipse, .nsc-part.wrong path { stroke: var(--red); stroke-width: 4; }
.nsc-lab { font: 800 14px var(--sans); fill: #fff; paint-order: stroke; stroke: rgba(10,14,26,.85); stroke-width: 4px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.nsc-map.labeled .nsc-lab,
.nsc-map.shown-speech .nsc-l-speech, .nsc-map.shown-move .nsc-l-move,
.nsc-map.shown-sight .nsc-l-sight, .nsc-map.shown-memory .nsc-l-memory { opacity: 1; }
.nsc-dir { font: 700 12px var(--sans); fill: var(--dim); }
.nsc-cab { display: block; width: 150px; height: auto; }
.nsc-map.grown .nsc-memory { transform-box: fill-box; transform-origin: 50% 50%; animation: nscGrow 1.6s ease-in-out infinite alternate; }
@keyframes nscGrow { from { transform: scale(1); } to { transform: scale(1.35); } }

/* cab driver or bus driver */
.nsc-drivers { width: 100%; max-width: 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nsc-driver { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; }
.nsc-driver img { width: 100%; max-width: 120px; height: auto; }
.nsc-driver b { font: 800 15px var(--sans); color: var(--text); }
.nsc-driver span { font: 600 12px var(--sans); color: var(--dim); text-align: center; }
.nsc-mini { width: 100%; max-width: 120px; height: auto; margin-top: 4px; overflow: visible; }
.nsc-mini .nsc-memory path { fill: #fcc050; stroke: #fff; stroke-width: 3; }
.nsc-mini .nsc-memory { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(1.7); transition: transform .8s cubic-bezier(.3,1.5,.5,1); }
.nsc-drivers.grown .nsc-mem-cab { transform: scale(2.6); filter: drop-shadow(0 0 6px #fcc050); }
.nsc-driver.right { border-color: var(--mint); }
.nsc-driver.wrong { border-color: var(--red); }

@media (max-height: 700px) {
  .nsc-driver img { max-width: 90px; }
  .nsc-mini { max-width: 90px; }
  .nsc-tan img { width: 130px; }
  .nsc-jar img { max-height: 180px; }
  .nsc-brain { max-width: 290px; }
  .nsc-who img { width: 60px; height: 60px; }
  .nsc-cab { width: 110px; }
}