/* Morpha viewer. Colors come from the tokens in style.css. */
.mo-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; max-width: 100%; }
.mo-chip.unsure .mo-thumb { outline: 1.5px dashed var(--serious); outline-offset: 1px; }
.mo-thumb { width: 14px; height: 19px; object-fit: cover; border-radius: 2px; flex: none; }
.mo-missing { display: inline-grid; place-items: center; font-size: 8px; background: var(--surface-2); color: var(--muted); }
.mo-type { font-size: 10px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.mo-type.t-end_turn, .mo-type.t-start_morph { background: var(--surface-2); }
.mo-mech img { width: 12px; height: 12px; }

.mo-fighters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mo-fighter { background: var(--surface-2); border-radius: 6px; padding: 6px 8px; }
.mo-who { font-weight: 600; margin-bottom: 4px; }
.mo-stat { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mo-stat .k { color: var(--muted); }
.mo-stat .v { grid-column: 3; }
.mo-stat.off .v { color: var(--critical); }
.mo-hp { position: relative; height: 8px; background: var(--surface); border-radius: 0 4px 4px 0; }
.mo-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 0 4px 4px 0; }
.mo-hp b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.mo-turn { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }

.mo-side { margin: 4px 0 2px; }
.mo-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-card { width: 58px; text-align: center; }
.mo-card .mo-img { width: 58px; height: 78px; object-fit: cover; border-radius: 4px; display: block; border: 1px solid var(--border); }
.mo-card .cap { font-size: 9px; color: var(--ink-2); line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.mo-card.text { display: grid; place-items: center; height: 78px; border: 1px dashed var(--border); border-radius: 4px; }
.mo-card.missing .mo-img, .mo-card.missing.text { outline: 2px solid var(--serious); outline-offset: 1px; }
.mo-card.missing .cap::after { content: " ≠"; color: var(--critical); }
.glyph { pointer-events: none; }
details.sec summary { cursor: pointer; }