/* Lightweight behavior arena: static actors and textual outcomes. */
.behavior-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.behavior-concepts button { display: grid; grid-template-columns: 30px 1fr; gap: 2px 9px; min-height: 56px; padding: 8px 12px; cursor: pointer; text-align: left; color: var(--muted); border: 1px solid var(--line); background: rgba(3,11,14,.94); }
.behavior-concepts button b { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: var(--cyan); border: 1px solid #315a65; font: 9px monospace; }
.behavior-concepts button span { color: var(--text); font-weight: 700; }
.behavior-concepts button small { font: 8px monospace; letter-spacing: .08em; }
.behavior-concepts button.is-active { border-color: var(--cyan); background: rgba(7,25,31,.96); }
.behavior-concepts button.is-complete small { color: var(--mint); }
.behavior-concepts button.is-locked { cursor: not-allowed; opacity: .45; }
.behavior-simulator { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(320px, .85fr); gap: 14px; margin-top: 14px; }
.behavior-arena { overflow: hidden; border: 1px solid #31594e; background: rgba(3,10,13,.94); }
.behavior-arena > header { display: flex; justify-content: space-between; padding: 8px 12px; color: var(--cyan); border-bottom: 1px solid #1d3936; font: 9px monospace; letter-spacing: .1em; }
.behavior-arena > header b { color: var(--muted); }
.behavior-simulator.is-running .behavior-arena > header b { color: var(--mint); }
.behavior-stage { position: relative; display: flex; align-items: end; justify-content: space-around; height: 150px; padding: 12px 30px 0; border-bottom: 1px solid #244a42; }
.behavior-actor { position: relative; width: min(30%, 150px); height: 132px; margin: 0; }
.behavior-actor img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 12px rgba(0,0,0,.75)); }
.behavior-actor figcaption { position: absolute; top: 0; left: 50%; z-index: 2; width: 110px; color: var(--text); font: 9px monospace; text-align: center; transform: translateX(-50%); }
.health-bar { display: block; height: 4px; margin-top: 4px; overflow: hidden; background: #26302e; }
.health-bar i { display: block; width: 100%; height: 100%; background: var(--mint); }
.behavior-result { position: absolute; right: 12px; bottom: 10px; left: 12px; padding: 5px 8px; color: var(--mint); background: rgba(2,7,9,.88); font: 9px monospace; text-align: center; }
.behavior-call { display: block; padding: 9px 12px; color: #9edfc1; background: rgba(2,7,9,.82); font: 11px monospace; text-align: center; }